如何使用gantt.destructor()？

Question

我在 Vue 中使用 DHTMLX GANTT。

创建甘特图后，我切换到另一页并 return，并非所有功能都可用。

在 dhtmlx 论坛中，他们给了一个 link 给：https://docs.dhtmlx.com/gantt/desktop__multiple_gantts.html

但是如果我尝试在我的应用程序中执行相同的操作，方法 const ganttChart = Gantt.getGanttInstance(); 未定义。

有没有办法在vue中完全销毁一个组件？我尝试使用 v-if、:key、$forceUpdate() 但没有成功。 DOM 中仍有一些甘特图组件。当我刷新页面时，它起作用了。

有没有其他方法可以销毁他从头开始渲染的组件？

Answer 1

Gantt 对象仅存在于试用版、企业版和旗舰版中。

要销毁甘特图实例，可以调用gantt.destructor方法：

https://docs.dhtmlx.com/gantt/api__gantt_destructor.html

它适用于所有甘特图版本。该方法应该会破坏甘特图容器，但它的调整大小观察器仍然存在：

http://prnt.sc/vkwmdw

甘特图销毁后，您将无法再次使用它，直到您重新加载页面或创建新的甘特图实例。

Answer 2

gantt.destructor 函数在 Vue 中也给我带来了一些问题。

我解决了它更改甘特图参考并分离在初始化期间附加的事件，例如 beforeDestroy Vue 生命周期，如下所示：

<div class="gantt" :id="ganttId"></div>

mounted () {
   this.ganttId = 'gantt-' + this.createUUID()
   this.initializeGannt()
}

beforeDestroy() {
    gantt.detachEvent("onTaskClick");
    gantt.detachEvent("onAfterTaskUpdate");
}

methods {
    initializeGannt () {
        ...
        gantt.attachEvent("onTaskClick", (id, e) => {
          ...
        }, {id: "onTaskClick"});

        gantt.attachEvent("onAfterTaskUpdate", (id, e) => {
          ...
        }, {id: "onAfterTaskUpdate"});
        ...
    }

}

如何使用gantt.destructor()？

How to use gantt.destructor()?

gantt-chart

dhtmlx

vue.js