Skip to content

Latest commit

 

History

History
200 lines (144 loc) · 5.02 KB

README_cn.md

File metadata and controls

200 lines (144 loc) · 5.02 KB
Raw

XGantt

OSCS Status

[English] [中文]

基于vue3的一个简单的甘特组件。

关于版本

v1 和 v2 不兼容。

  • 参数不同
  • 插槽不同
  • 组件不同

更多细节请参见 文档

十分重要

这个库是 jz-gantt 的 vue3 版本的继承库。如果您之前已经使用了 jz-gantt，则需要仔细阅读如下内容。

说明：

这个库的 1.0.1 相当于 [email protected]。并且 jz-gantt 不再维护。

如何迁移

  1. 包名不同， @xpyjs/gantt 替换了 jz-gantt。
  2. 所有以 j- 或 J 的前缀全都更新为 x- 或 X。

除此之外，无需其他改动。

截图

截图

什么是 XGantt

  • 根据日期自动生成甘特图
  • 支持多层扩展
  • 高性能
  • 多层联动
  • 多级选取
  • 支持自定义表内容
  • 支持自定义甘特内容
  • 支持自定义表头
  • 动态更新数据
  • 定制任意风格
  • 支持黑暗模式
  • 支持多种日期显示模式切换
  • 更多持续更新

文档

要查看源码，参见 Github

有关更详细的文档，参见 document web

要看示例，参见 example web

如果遇到任何问题，请提 issue.

如何使用

安装

npm install @xpyjs/gantt --save
// or
yarn add @xpyjs/gantt  // 推荐

使用

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

createApp(App).use(Gantt).mount("#app");

基本用法

Data 应该是 Array<any> 类型，index，startDate，endDate和children 应该在 Data item 中，它们有助于正确显示数据。当然，每一个字段都可以自定义。

V2 中的 children 不再是必须的。 V2 中的 index 默认改为 id。

const dataList = [
  {
    index: 1,
    startDate: "2020-06-05",
    endDate: "2020-08-20",
    ttt: {
      a: "aaa",
      b: "bbb"
    },
    name: "mydata1",
    children: [] // children 是必须的，如果没有，给一个空数组即可
  },
  {
    index: 2,
    startDate: "2020-07-07",
    endDate: "2020-09-11",
    ttt: {},
    name: "mydata2",
    children: [
      {
        index: 3,
        startDate: "2020-07-10",
        endDate: "2020-08-15",
        ttt: {
          a: "aaa"
        },
        name: "child1",
        children: [] // children 是必须的，如果没有，给一个空数组即可
      }
    ]
  }
];
v1 版本 
<x-gantt data-index="index" :data="dataList" />
v2 版本 
<x-gantt data-id="index" :data="dataList" />

使用列插槽组件

我们提供了一个名为 XGanttColumn 的插槽。 Label 是必需的，它的值应当对应 data 中的字段名（支持深度查询），这会告诉组件渲染那一列内容。

v1 版本 
<x-gantt data-index="index" :data="dataList">
  <x-gantt-column label="name" />
</x-gantt>
v2 版本 
<x-gantt data-id="index" :data="dataList">
  <x-gantt-column prop="name" />
</x-gantt>

使用滑块插槽组件

我们提供一个名为 XGanttSlider 的插槽。如果传入多个滑块，有且只有最后一个滑块将被渲染。

v1 版本 
<x-gantt data-index="index" :data="dataList">
  <x-gantt-slider />   <!-- no render -->
  <x-gantt-slider />   <!-- will be rendered -->
</x-gantt>
v2 版本 
<x-gantt data-id="index" :data="dataList">
  <x-gantt-slider />   <!-- no render -->
  <x-gantt-slider />   <!-- will be rendered -->
</x-gantt>

许可证

MIT