在vue中使用dhtmlx-gantt,遇到的问题

[houqingbin]

在vue2中使用dhtmlx-gantt,配置了gantt.plugins({ tooltip: true });,有时候鼠标离开后还会有tips窗口 如果使用destroyed生命周期,并gantt.destructor(),会在下次进入调用gantt组件页面时,会抛出TypeError: Cannot read properties of undefined (reading 'tasksStore') at t._update_flags错误

[gearcoded]

@houqingbin, If you use the Gantt instance approach, Gantt should hide the tooltip: https://docs.dhtmlx.com/gantt/desktop__multiple_gantts.html#destructorofganttanddataprocessorinstances

In the past, Gantt didn't hide the tooltip, but starting from the 6.1.4 version, it is removed when you call the destructor method: https://docs.dhtmlx.com/gantt/whatsnew.html#:~:text=Fix%20incorrect%20behavior%20of%20the%20Tooltip%20extension%20when%20gantt.destructor%20is%20called

If your license doesn't allow you to use the Gantt Instance approach, it means that you cannot use the destructor method and need to manually handle all that is left from Gantt after you open a different tab: https://docs.dhtmlx.com/gantt/desktop__gantt_instance.html

You can use the following code to manually hide all the tooltips:

const tooltips = document.querySelectorAll(".gantt_tooltip");
tooltips.forEach(function(el){
  el.remove()
})

[lfk0719]

怎么样老哥解决了吗

[DaTongDXM]

我也遇到了，使用destructor再打开会直接挂掉

[gearcoded]

@DaTongDXM, if you use the destructor method in the GPL or Individual versions, this is expected behavior. You need to reload the page to start using Gantt again. So, with these versions, you shouldn't use the destructor method. Instead, you need to manually detach all event handlers and remove the loaded data. This approach is described here: https://docs.dhtmlx.com/gantt/desktop__gantt_instance.html

If you use another Pro version, you should be able to create a new Gantt Instance when you open a page/tab/view with Gantt: https://docs.dhtmlx.com/gantt/desktop__multiple_gantts.html

Here are the demos:

Vue 3 + Gantt Instance Alternative: https://files.dhtmlx.com/30d/c0a7cdde5ff4139e785733d9bfdbc9fb/vue3+gantt-gpl.zip

Vue 3 + Gantt Instance: https://files.dhtmlx.com/30d/e8f8df5f93c8fd480d9056eba19e9be5/vue3+GanttInstance+8.0.1_trial.zip