入门
JeremyJone ... 2023-2-14 大约 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
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
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
2
3
如上操作之后,您将看到:

如果没有,请尝试重新操作。
如果它正常显示,请继续深入学习其他属性,以便更好的适应您的页面。
# 支持 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
属性,适配黑暗模式。 - 调整了表头的格式。