最终删除了<style scoped>的scoped后解决。
在 Vue.js 中使用 DHTMLX Gantt 是可行的，但要注意某些细节，以确保样式和模板正常工作。Vue 的组件体系和样式作用域可能会影响 Gantt 图的样式应用。以下是一些解决方案：
1. 检查 CSS 作用域
如果您的 CSS 使用了 <style scoped>，那么这些样式只能作用于当前组件，无法影响 Gantt 图内的元素。为了解决这个问题，您需要将自定义样式放在不带 scoped 的 <style> 标签中，或者全局引入样式：
<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 已经渲染完毕后加载：
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 时遇到的样式和模板问题。
标签：Vue,渲染,样式,vue3,甘特图,color,Gantt,CSS,gantt From： https://www.cnblogs.com/atrue/p/18542062