【亲测免费】 XGantt：一个简单易用的甘特图组件

1. 项目介绍

XGantt 是一个基于 Vue.js 的简单易用甘特图组件，支持 Vue 3 和 Vue 2 版本。该组件具有高性能、多层级展开、多层级联动、多阶段选择等功能，可以自定义表格列内容、甘特图行内容、头部内容，支持暗黑模式，并且可以轻松切换多种日期显示模式。

2. 项目快速启动

在开始使用 XGantt 前，请确保您的项目已经安装了 Vue.js。

安装

通过 npm 或 yarn 安装 XGantt：

npm install @xpyjs/gantt --save
# 或者
yarn add @xpyjs/gantt

使用

在 Vue 项目中引入并注册 XGantt 组件：

import XGantt from "@xpyjs/gantt";
import "@xpyjs/gantt/index.css";

createApp(App).use(XGantt).mount('#app');

基本使用

数据应该是数组类型，包含 index、startDate、endDate 字段，以及可选的 children 字段：

const dataList = [
  {
    index: 1,
    startDate: "2020-06-05",
    endDate: "2020-08-20",
    name: "mydata1",
    children: []
  },
  {
    index: 2,
    startDate: "2020-07-07",
    endDate: "2020-09-11",
    name: "mydata2",
    children: [
      {
        index: 3,
        startDate: "2020-07-10",
        endDate: "2020-08-15",
        name: "child1",
        children: []
      }
    ]
  }
];

在模板中使用 <x-gantt> 标签显示数据：

<template>
  <x-gantt :data="dataList" data-index="index" />
</template>

3. 应用案例和最佳实践

以下是一些使用 XGantt 的典型应用案例和最佳实践：

自定义表格列

通过 <x-gantt-column> 插槽来自定义表格列：

<x-gantt :data="dataList" data-index="index">
  <x-gantt-column label="name" />
</x-gantt>

使用甘特图滑块

通过 <x-gantt-slider> 插槽来添加甘特图滑块：

<x-gantt :data="dataList" data-index="index">
  <x-gantt-slider />
</x-gantt>

4. 典型生态项目

以下是使用 XGantt 的典型生态项目：

• XGantt 官方文档
• XGantt GitHub 仓库

请注意，以上内容仅为示例，具体使用方法和细节请参考官方文档。