vue dhtmlxgantt数据绑定的问题解决

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>