dhtmlxGantt vue3 写入数据

要使用dhtmlxGantt与Vue3结合起来，你可以使用Vue3的Composition API来管理gantt的数据和状态。首先，你需要在Vue3项目中安装dhtmlxGantt：

npm install dhtmlx-gantt

然后，在Vue3组件中引入dhtmlxGantt，并对其进行初始化和配置。例如：

<template>
  <div ref="ganttContainer"></div>
</template>

<script>
import { ref, onMounted } from 'vue';
import 'dhtmlx-gantt';

export default {
  setup() {
    const ganttContainer = ref(null);

    onMounted(() => {
      const gantt = window.Gantt.getGanttInstance();
      gantt.init(ganttContainer.value);
      gantt.parse([
        { id: 1, text: 'Task #1', start_date: '2022-01-01', duration: 3 },
        { id: 2, text: 'Task #2', start_date: '2022-01-02', duration: 2 },
      ]);
    });

    return { ganttContainer };
  },
};
</script>

这个组件会在页面渲染时初始化gantt，并向其中写入一些示例数据。你可以将这些数据替换为你自己的数据。

然后，你可以使用Vue3的响应式API来管理gantt的数据和状态。例如，你可以创建一个data对象，在其中定义gantt的数据，并在组件中使用ref将其设为响应式：

<template>
  <div ref="ganttContainer"></div>
</template>

<script>
import { ref, onMounted } from 'vue';
import 'dhtmlx-gantt';

export default {
  setup() {
    const ganttContainer = ref(null);
    const data = ref([
      { id: 1, text: 'Task #1', start_date: '2022-01-01', duration: 3 },
      { id: 2, text: 'Task #2', start_date: '2022-01-02', duration: 2 },
    ]);

    onMounted(() => {
      const gantt = window.Gantt.getGanttInstance();
      gantt.init(ganttContainer.value);
      gantt.parse(data.value);
    });

    return { ganttContainer, data };
  },
};
</script>

接下来，你可以使用watchEffect来监听data对象的变化，并在响应式地更新gantt的数据：

<template>
  <div ref="ganttContainer"></div>
</template>

<script>
import { ref, onMounted, watchEffect } from 'vue';
import 'dhtmlx-gantt';

export default {
  setup() {
    const ganttContainer = ref(null);
    const data = ref([
      { id: 1, text: 'Task #1', start_date: '2022-01-01', duration: 3 },
      { id: 2, text: 'Task #2', start_date: '2022-01-02', duration: 2 },
    ]);

    onMounted(() => {
      const gantt = window.Gantt.getGanttInstance();
      gantt.init(ganttContainer.value);
      gantt.parse(data.value);

      watchEffect(() => {
        gantt.clearAll();
        gantt.parse(data.value);
      });
    });

    return { ganttContainer, data };
  },
};
</script>

这个组件会在页面渲染时初始化gantt，并向其中写入一些示例数据。当data对象发生变化时，gantt会响应式地更新其数据。

这里只是一个简单的示例，你可以根据自己的需求来配置和管理gantt的数据和状态。