DHTMLX / gantt

GPL version of Javascript Gantt Chart
https://dhtmlx.com/docs/products/dhtmlxGantt/
GNU General Public License v2.0
1.48k stars 324 forks source link

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

Open houqingbin opened 10 months ago

houqingbin commented 10 months ago

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

image

gearcoded commented 9 months ago

@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 commented 9 months ago

怎么样老哥解决了吗

DaTongDXM commented 8 months ago

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

gearcoded commented 7 months ago

@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