vue前端项目中开发基于甘特图的项目计划模块

# vue前端项目中开发基于甘特图的项目计划模块 ## 参考链接 相比以前jquery的资料，vue的甘特图插件少很多，中文资料更是少的可怜，以下两个链接是在网上搜到相对还不错的甘特图插件 [https://www.cnblogs.com/liang715200/p/12029640.html](https://www.cnblogs.com/liang715200/p/12029640.html) [https://github.com/neuronetio/vue-gantt-elastic](https://github.com/neuronetio/vue-gantt-elastic) ## 开始使用 1. 按照以下插件 ``` npm intall gantt-elastic npm install gantt-elastic-header npm install dayjs ``` 2. 复制以下代码到vue文件 ``` ``` 3. 至此，一个简单的甘特图就能显示出来了，下面放个截图  ## 下面重点谈下在集成插件到项目中踩过的坑 1. 翻译控件中的英文，在option下面添加如下配置，翻译控件中的星期和月份 ``` locale: { weekdays:["周日","周一","周二","周三","周四","周五","周六"], months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"], } ``` 2. 点击事件，获取Id，该控件的点击事件如下，在columns中的events有点击事件的对象，由于在events无法获取vue页面的this对象，因此我定义了that变量，在mount中把that=this ``` columns: [ { id: 1, label: "任务", value: "label", width: 200, expander: true, html: true, events: { click({ data, column }) { that.handleEdit(data.id) } } }, { id: 2, label: "责任人", value: "user", width: 78, html: true }, ``` ``` mounted() { that=this }, ``` 3. 该插件有一个bug，当task数据位空时，会造成浏览器进入假死的状态，我的处理方式是当后端返回空数据的时候，判断如果是空的话就用默认数据填充，并且使用v-if判断控件是否显示 ```