在vue3中使用甘特图动态渲染失败

最终删除了<style scoped>的scoped后解决。

 

在 Vue.js 中使用 DHTMLX Gantt 是可行的，但要注意某些细节，以确保样式和模板正常工作。Vue 的组件体系和样式作用域可能会影响 Gantt 图的样式应用。以下是一些解决方案：

1. 检查 CSS 作用域

如果您的 CSS 使用了 <style scoped>，那么这些样式只能作用于当前组件，无法影响 Gantt 图内的元素。为了解决这个问题，您需要将自定义样式放在不带 scoped 的 <style> 标签中，或者全局引入样式：

vue

<style> /* 确保这些样式在全局范围内 */ .gantt_task_line.high { background-color: #d96c49; color: #fff; } .gantt_task_line.medium { background-color: #e81616; color: #fff; } .gantt_task_line.low { background-color: #fff; color: #fff; } </style>

2. 检查 Gantt 的 DOM 渲染

DHTMLX Gantt 可能在 Vue 的生命周期中被重新渲染，导致自定义样式或模板未正确应用。确保在 Vue 组件的 mounted() 钩子中初始化 Gantt 图，这样可以保证 Gantt 图在 DOM 已经渲染完毕后加载：

javascript

mounted() { gantt.init("gantt_here"); gantt.parse(this.tasks); // 确保任务数据已加载 }

3. 样式加载顺序

确认自定义 CSS 在 Gantt 图初始化后被正确加载，避免被其他样式覆盖。如果您使用了外部样式文件或 CSS 预处理器，请确保它们在 Vue 项目中正确导入。

4. 检查任务数据

确保任务数据对象的 priority 属性正确传递给 Gantt 图的任务，否则 task_class 模板不会返回预期的类名。

5. Vue 和 DHTMLX Gantt 结合的额外注意事项

• 在 Vue 项目中引入 Gantt 时，确保 gantt 相关的 JS 和 CSS 文件已经被正确引入。
• 如果 Gantt 的 DOM 容器由 Vue 渲染，可以在 Vue 的 ref 上挂载 Gantt 图，以确保 Vue 可以管理其生命周期。

通过检查这些因素，您应该能解决在 Vue 项目中使用 DHTMLX Gantt 时遇到的样式和模板问题。