Vue3+TS+dhtmlx-gantt实现甘特图

<template>
  <div>
    <div ref="ganttContainer" style="height: 600px;"></div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
 
export default defineComponent({
  setup() {
    const ganttContainer = ref<HTMLElement | null>(null);
 
    onMounted(() => {
      if (ganttContainer.value) {
        dhx.gantt({
          container: ganttContainer.value,
          // 其他配置项...
        });
      }
    });
 
    return {
      ganttContainer,
    };
  },
});
</script>

这段代码展示了如何在Vue 3和TypeScript环境中使用dhtmlx-gantt。首先，我们通过ref创建了一个响应式DOM元素引用ganttContainer，用于挂载甘特图。在组件的onMounted生命周期钩子中，我们初始化dhtmlxGantt，并将ganttContainer的值传递给container选项。这样，当组件挂载后，甘特图就会在指定的容器中渲染出来。