vue3+dhtmlx-gantt的简单demo

安装dhtmlx-gantt（standard）

yarn add dhtmlx-gantt --save (for yarn)
npm install dhtmlx-gantt --save (for npm)

main.js

import { createApp } from "vue";
import App from "./App.vue";
import { gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css"

const app = createApp(App);

app.config.globalProperties.$gantt = gantt;
app.mount("#app");

gantt.vue

<template>
  <div class="hello">
    <div ref="gantt" style="height: 500px"></div>
  </div>
</template>

<script setup>
import {
  getCurrentInstance,
  onMounted,
  defineEmits,
  defineExpose,
  defineProps,
} from "vue";
const props = defineProps({
  tasks: {
    type: Object,
    default: () => ({
      data: [],
      tasks: [],
    }),
  },
});
const { proxy } = getCurrentInstance();
const emit = defineEmits(["link-updated", "task-updated", "task-selected"]);

onMounted(() => {
  proxy.$gantt.config.xml_date = "%Y-%m-%d";
  proxy.$gantt.config.columns = [ //左侧列
    { name: "text", label: "任务名称", tree: true, width: 200 },
    { name: "start_date", label: "开始时间", align: "center" },
    { name: "end_date", label: "结束时间", align: "center" },
    { name: "duration", label: "工期", align: "center" },
    { name: "add", label: "" },
  ];
  proxy.$gantt.config.sort = true;//表格排序
  proxy.$gantt.config.scale_unit = "week";
  proxy.$gantt.config.date_scale = "%M"; //表头日期格式
  proxy.$gantt.config.scales = [{ unit: "week", step: 1, format: "%M,%Y" }];
  proxy.$gantt.config.subscales = [
    //二级表头配置,二级表头在表格中是上排
    {
      unit: "month", //表头时间单位
      step: 1,
      date: "%M,%Y",
    },
  ];
  proxy.$gantt.config.scale_height = 60; //表头高度
  proxy.$gantt.config.min_column_width = 40; //表格最小列宽
  proxy.$gantt.t