在Quasar项目中集成DHTMLX Gantt出现空白页问题求助

1. 检查样式是否正确引入 #

DHTMLX Gantt依赖自身CSS文件，若未正确引入会导致组件无样式渲染，表现为空白页。

• 在quasar.config.js的css数组中添加Gantt样式路径：

// quasar.config.js
module.exports = configure(function (ctx) {
  return {
    css: [
      'app.scss',
      '~dhtmlx-gantt/codebase/dhtmlxgantt.css'
    ]
  }
})

或在组件内直接引入：

import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'

2. 确保容器有明确宽高 #

Gantt需要挂载在固定尺寸的容器中，Quasar默认布局可能未给容器设置尺寸，导致无法渲染。
在组件模板中给容器添加样式：

<template>
  <div class="gantt-container"></div>
</template>

<style scoped>
.gantt-container {
  width: 100%;
  height: calc(100vh - 80px); /* 根据自身布局调整高度 */
}
</style>

3. 调整Boot文件初始化逻辑 #

Quasar的boot文件执行时机与纯Vue项目有差异，需确保Gantt在DOM挂载完成后初始化。
修改boot文件（如boot/gantt.js）：

import { boot } from 'quasar/wrappers'
import gantt from 'dhtmlx-gantt'

export default boot(({ app }) => {
  app.config.globalProperties.$gantt = gantt
})

在组件的onMounted钩子中初始化Gantt：

<script setup>
import { onMounted } from 'vue'
import gantt from 'dhtmlx-gantt'

onMounted(() => {
  const container = document.querySelector('.gantt-container')
  if (container) {
    gantt.init(container)
    // 加载测试数据验证
    gantt.parse({
      data: [
        { id: 1, text: 'Task #1', start_date: '2024-01-01', duration: 5 },
        { id: 2, text: 'Task #2', start_date: '2024-01-06', duration: 3 }
      ],
      links: []
    })
  }
})
</script>

4. 排查版本兼容性 #

确认DHTMLX Gantt版本支持当前Quasar和Vue 3版本，若使用旧版可能存在兼容问题，尝试升级：

npm update dhtmlx-gantt

5. 处理样式隔离冲突 #

Quasar的scoped样式可能影响Gantt渲染，可移除容器样式的scoped，或使用::v-deep穿透：

::v-deep .gantt-container {
  width: 100%;
  height: 100%;
}

内容的提问来源于stack exchange，提问作者MohamedHelmi MEZRI