超详细的vue3+ts+dhtmlx甘特图免费版组件使用方法,支持事件内自定义和样式修改

<template>
  <div>
    <DxGantt
      :tasks="tasks"
      :dependencies="dependencies"
      :resourceAssignments="resourceAssignments"
      :resources="resources"
      :columns="columns"
      :rootTaskId="1"
      :taskTitlePosition="'inside'"
      :showResources="true"
      :showRowLines="true"
      :scaleType="'minutes'"
      :editing="editing"
      :validation="validation"
      @taskUpdated="onTaskUpdated"
      @taskMoving="onTaskMoving"
    >
      <DxBar
        :items="toolbarItems"
        :location="'before'"
      />
      <DxSelectionSettings
        :showCheckBoxesMode="'onClick'"
      />
      <DxScaleTypeRangeSettings
        :min="minScale"
        :max="maxScale"
        :scaleType="'minutes'"
      />
      <DxExport :enabled="true" />
    </DxGantt>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import {
  DxGantt,
  DxBar,
  DxSelectionSettings,
  DxScaleTypeRangeSettings,
  DxExport,
} from 'devextreme-vue/gantt';
import 'devextreme/ui/gantt';
import 'devextreme/ui/toolbar';
 
export default defineComponent({
  components: {
    DxGantt,
    DxBar,
    DxSelectionSettings,
    DxScaleTypeRangeSettings,
    DxExport,
  },
  setup() {
    const tasks = ref([{
      id: 1,
      title: 'Project',
      start: '2020-01-01T08:00:00',
      end: '2020-01-02T09:00:00',
      progress: 0.6,
    }]);
    const dependencies = ref([]);
    const resourceAssignments = ref([]);
    const resources = ref([]);
    const columns = ref([]);
    const editing = ref({});
    const validation = ref({});
    const toolbarItems = ref([
      'undo',
      'redo',
      'separator',
      {
        widget: 'dxButton',
        location: 'before',
        options: {
          text: 'Custom',
          onClick: () => alert('Custom button clicked'),
        },
      },
    ]);
    const minScale = ref('minutes');
    const maxScale = ref('months');
 
    const onTaskUpdated = (e) => {
      // 自定义任务更新逻辑
    };
    const onTaskMoving = (e) => {
      // 自定义任务移动逻辑
    };
 
    return {
      tasks,
      dependencies,
      resourceAssignments,
      resources