vue-gantt

dhtmlxGantt with vue.js, A gantt component for Vue.js

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:9090
npm run dev

# build for production with minification
npm run build

gantt功能总结

按钮切换
- 今天
- 上一屏
- 下一屏
时间 marker
- TodayMarker
- 项目Marker
拖拽
- moveTask
- 左右拖拽task
任务样式
- 没有开始的时间
- 没有结束的时间
- 两者都没有
状态
- 未开始
- 进行中
- 已完成
- 逾期
点击显示任务弹窗
tooltip提示信息
数据
- 过滤
- 筛选 - 格式化

核心

除去官方提供的配置和事件，主要集中在数据的聚合。一是将从接口获取的数据结构转换为gantt所需的数据结构；二是数据同步更新，我的做法是利用lodash的diff函数计算出更新前后数据的变化项，然后利用gantt提供的事件与方法逐个更新，性能方面就回到了老生常谈的话题上了，不再赘述。另外值得一提的是经过大量数据的测试dhtmlxGantt框架的性能是非常可观的，一次重新渲染的速度要大于重新排序所消耗的时间。（据说5.0以上版本再性能上还有不少提升，并且增加了更多实用的api，只是貌似暂时不对外，只能从官网例子上一睹为快了）

wuyaoxing/vue-gantt

vue-gantt

Build Setup

gantt功能总结

核心