甘特图在Vue中的应用篇

注意：该插件只能在有外网上运行，内网不行，坑、坑、坑，重要的事情说三遍。

 

1、首先安装插件，由于官网上一些功能是收费的，所以我在github上发现一款还不错的插件，并有文档说明（全英）

npm i gantt-schedule-timeline-calendar

附上文档地址：https://gantt-schedule-timeline-calendar.neuronet.io/documentation/getting-started

Git项目地址：https://github.com/neuronetio/gantt-schedule-timeline-calendar#weekendhighlight-plugin

官方vue实例：https://github.com/neuronetio/vue-gantt-schedule-timeline-calendar

具体的Demo案例：https://github.com/neuronetio/vue-gantt-schedule-timeline-calendar-example

2、vue做甘特图，先大致介绍下核心功能：

（1）横轴、纵轴拖拽；

（2）自定义监听点击事件（双击、右键等）

（3）任务之间显示父子层级关系；

（4）左侧列表信息，右侧时间轴表示任务；

（5）每个任务可以订制样式，并且可以动态修改样式；

（6）自定义时间粒度显示（小时、天、星期、月、年）；

（7）支持大批量数据渲染；

（8） 支持同行多节点渲染；

（9）支持选中，以及批量选中；

（9）优秀的扩展性，支持第三方插件。

等等还有其他的一些功能。这里先看一下效果图：

接下来会介绍用什么实现的，怎么使用，怎么添加拖拽、点击等各种功能，我以vue为例进行开发。

基础使用已经贴代码了，不做赘述，不清楚的查看官方示例，接下来主要说核心功能如何配置，这方面官方描述的不是很清楚，但是Git的 issues 好多问题都关闭了，基本大部分问题都可以查到。

1、基础展示，左侧多列表格展示

        

 

 

 这个主要配置config中的 list 属性，

　　rows 代表左侧表格的行属性，key值是每行的id，多个key就有多行，通常都以数字做key值， 内部 具体属性是列信息。比如 order label line 等都是列信息，这个会一一对应到指定列。

　　　　parentID 是父节点配置，一般配置了父节点，就会在 甘特图 中展示出父子层级来。

　　　　expanded 是展开属性，默认false，父子层级是合上的，折叠隐藏子节点。如果想默认展示需要每个节点都加上这个属性。

　　columns 代表左侧表格的列属性，key唯一就是列关键字。