入门

JeremyJone ... 2022-3-29 大约 2 分钟

# 入门

作者:jeremyjone

日期:2020-12-22

版本:0.0.17

版权:jeremyjone


通过入门的章节内容,可以快速引入并使用 JzGantt。

# 安装

使用 npm 安装:

npm install jz-gantt --save
1

提示

因为处于完善阶段,请确保使用最新版本。

# 引入

JzGantt 会被整体引入,引入的 Gantt 就是 JzGantt 的根组件。同时需要单独引入样式表,方式如下:

import Vue from "vue";
import Gantt from "jz-gantt";
import "jz-gantt/lib/jz-gantt.css";

Vue.use(Gantt);
1
2
3
4
5

# 使用

JzGantt 需要一个数组形式的数据对象。例如,您拥有如下数据:

const dataList = [
  {
    index: 1,
    startDate: "2020-06-05",
    endDate: "2020-08-20",
    ttt: {
      a: "aaa",
      b: "bbb"
    },
    name: "mydata1",
    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: []
      }
    ]
  }
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

那么只需要在 html 中简单的使用 JzGantt,即可创建一个甘特内容:


 


<j-gantt data-index="index" <!-- 请确保它存在 -->
  :data="dataList" />
</j-gantt>
1
2
3

如上操作之后,您将看到:

basic

如果没有,请尝试重新操作。

如果它正常显示,请继续深入学习其他属性,以便更好的适应您的页面。

# 支持 TypeScript

JGantt 已经有了完整的 TypeScript 类型声明文件,如果您需要,只需要在使用中通过:

import { JGantt, JGanttColumn, JGanttSlider } from "jz-gantt";
1

按需导入即可。

# 更新日志

提示

您可以跳过此内容以继续深入学习具体配置 JGantt。

# Release 0.0.17

  • 调整滑块移动的接口,现在它抛出了旧数据。

# Release 0.0.16

  • 添加了一个方法 setSelected,用于设置一条选中的项。
  • 修正了一些样式问题。

# Release 0.0.15

  • 添加了一个 settings 的具名插槽,可以向设置抽屉插入自定义内容。
  • 添加了一个 dark 属性,适配黑暗模式。
  • 调整了表头的格式。