vue中使用dhtmlx-gantt在调用destructor后怎么重新渲染加载

在Vue.js中使用dhtmlx-gantt，在调用gantt.destructor()方法销毁实例之后，需要重新创建一个新的gantt实例，并使用之前保存的ganttData填充它。然后，可以调用gantt.render()方法重新渲染gantt图表。以下是示例代码：

<template>
  <div ref="ganttContainer"></div>
</template>

<script>
import "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

export default {
  data() {
    return {
      ganttData: null,
      ganttInstance: null,
    };
  },
  mounted() {
    this.ganttInstance = gantt.init(this.$refs.ganttContainer);
    this.ganttInstance.parse(this.ganttData);
  },
  methods: {
    reloadGantt() {
      // 销毁当前的gantt实例
      this.ganttInstance.destructor();

      // 创建新的gantt实例并重新加载数据
      this.ganttInstance = gantt.init(this.$refs.ganttContainer);
      this.ganttInstance.parse(this.ganttData);

      // 重新渲染gantt图表
      this.ganttInstance.render();
    },
  },
};
</script>

在这个示例中，我们在组件的data属性中保存ganttData和ganttInstance。在组件的mounted钩子函数中，我们初始化了gantt实例并使用ganttData填充它。在组件的reloadGantt方法中，我们首先调用gantt.destructor()方法销毁当前的gantt实例。然后，我们创建新的gantt实例并使用之前保存的ganttData填充它。最后，我们调用gantt.render()方法重新渲染gantt图表。