# 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判断控件是否显示
```
