dhtmlx-gantt+vue3 完整的使用方式

以下是一个完整的dhtmlx-gantt和Vue 3结合使用的示例，包括项目结构和代码实现：

1. 安装依赖库

在Vue项目中，您需要安装dhtmlx-gantt和其依赖库：

npm install dhtmlx-gantt dhtmlx-gantt-tooltip dhtmlx-gantt-locale-cn

2. 创建Vue组件

在Vue项目中创建一个名为"GanttComponent"的组件，并在其中引入dhtmlx-gantt库。使用Vue的生命周期函数，在mounted函数中初始化gantt组件，在beforeDestroy函数中销毁它：

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

<script>
import "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
import "dhtmlx-gantt-tooltip";
import "dhtmlx-gantt-locale-cn";

export default {
  name: "GanttComponent",
  props: {
    tasks: Array,
    links: Array
  },
  mounted() {
    gantt.config.xml_date = "%Y-%m-%d %H:%i";
    gantt.locale.labels.section_name = "名称";
    gantt.locale.labels.section_start_date = "开始时间";
    gantt.locale.labels.section_duration = "持续时间";
    gantt.init(this.$refs.ganttContainer);
    gantt.parse({
      data: this.tasks,
      links: this.links
    });
  },
  beforeDestroy() {
    gantt.destructor();
  }
};
</script>

在这个组件中，我们引入了dhtmlx-gantt、dhtmlx-gantt-tooltip和dhtmlx-gantt-locale-cn库，并在mounted函数中初始化了gantt组件。我们使用props将任务列表和任务链接传递给gantt组件，并在beforeDestroy函数中销毁了它。

3. 在父组件中使用GanttComponent

在父组件中引入GanttComponent，并将任务列表和任务链接作为props传递给它：

<template>
  <div>
    <gantt-component :tasks="tasks" :links="links" />
  </div>
</template>

<script>
import GanttComponent from "./GanttComponent.vue";

export default {
  name: "App",
  components: {
    GanttComponent
  },
  data() {
    return {
      tasks: [
        {
          id: 1,
          text: "任务1",
          start_date: "2022-05-01 00:00",
          duration: 3
        },
        {
          id: 2,
          text: "任务2",
          start_date: "2022-05-01 00:00",
          duration: 5,
          parent: 1
        },
        {
          id: 3,
          text: "任务3",
          start_date: "2022-05-03 00:00",
          duration: 2,
          parent: 1
        },
        {
          id: 4,
          text: "任务4",
          start_date: "2022-05-06 00:00",
          duration: 4
        }
      ],
      links: [
        {
          id: 1,
          source: 1,
          target: 2,
          type: "finish_to_start"
        },
        {
          id: 2,
          source: 1,
          target: 3,
          type: "finish_to_start"
        },
        {
          id: 3,
          source: 2,
          target: 4,
          type: "finish_to_start"
        }
      ]
    };
  }
};
</script>

在这个示例中，我们在父组件中引入了GanttComponent，并将任务列表和任务链接作为props传递给它。我们使用data属性定义了一个包含任务列表和任务链接的对象。

希望这个完整示例可以帮助您了解如何使用dhtmlx-gantt和Vue 3结合使用！