vue dhtmlx-gantt动态绑定数据的问题解决
相信大家用dhtmlx-gantt时,或多或少会遇到由于静态的问题,导致数据不能及时刷新的问题,其实这个问题很好解决
其中,
重要的就是在数据绑定的时候需要在mounted时绑定,并且,在数据赋值完成后才进行gantt.init和gantt.parse
// 初始化
gantt.init(this.$refs.gantt);
// 数据解析
gantt.parse(this.tasks);
下面是实际代码,请着重gantt.init和gantt.parse的位置
<template>
<div style="padding: 10px;">
<div class="app-container">
<div ref="gantt" class="left-container"/>
</div>
</div>
</template>
<script>
import gantt from 'dhtmlx-gantt' // 引入模块
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import * as sysProjectSchedule from "@/api/sys_project_schedule";
export default {
name: "ganttEchart",
data() {
return {
tasks: {
data: [],
links: []
}
}
},
mounted() {
this.getData();
},
methods: {
getData(){
gantt.clearAll();
gantt.config.xml_date = "%Y-%m-%d";
// 在时间线上增加一行年份显示
gantt.config.subscales = [
{
unit: 'year',
step: 1,
date: '%Y'
}
]
gantt.config.readonly=true;
//gantt.config.details_on_dblclick = true;
gantt.config.columns = [
{
name:"text",
label:"Task Name",
width: 200
},
{
name:"start_date",
label:"Start Time",
width: 100
},
{
name:"duration",
label:"Duration",
width: 50
},
];
var url = window.location.href;
var id = url.split("/")[6];
this.mainId = id;
sysProjectSchedule.getAllList(id).then((response) => {
if(response.data.length > 0){
response.data.forEach(element => {
element.duration = Number(element.duration.substr(0, element.duration.length - 1));
element.start_date = element.start_date.substr(0, element.start_date.length - 9)
});
this.tasks.data = response.data;
}
sysProjectSchedule.loadDataForLink(id).then((response) => {
if(response.data.length > 0){
this.tasks.links = response.data;
}
// 初始化
gantt.init(this.$refs.gantt);
// 数据解析
gantt.parse(this.tasks);
});
});
}
}
}
</script>
<style scoped>
.left-container {
height: 600px;
}
</style>