超详细的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
VUE
最后修改于:2024年08月17日 09:16

评论已关闭

推荐阅读

DDPG 模型解析,附Pytorch完整代码
2024年11月24日
DQN 模型解析,附Pytorch完整代码
2024年11月24日
AIGC实战——Transformer模型
2024年12月01日
Socket TCP 和 UDP 编程基础(Python)
2024年11月30日
python , tcp , udp
如何使用 ChatGPT 进行学术润色?你需要这些指令
2024年12月01日
AI
最新 Python 调用 OpenAi 详细教程实现问答、图像合成、图像理解、语音合成、语音识别(详细教程)
2024年11月24日
ChatGPT 和 DALL·E 2 配合生成故事绘本
2024年12月01日
omegaconf,一个超强的 Python 库!
2024年11月24日
【视觉AIGC识别】误差特征、人脸伪造检测、其他类型假图检测
2024年12月01日
[超级详细]如何在深度学习训练模型过程中使用 GPU 加速
2024年11月29日
Python 物理引擎pymunk最完整教程
2024年11月27日
MediaPipe 人体姿态与手指关键点检测教程
2024年11月27日
深入了解 Taipy:Python 打造 Web 应用的全面教程
2024年11月26日
基于Transformer的时间序列预测模型
2024年11月25日
Python在金融大数据分析中的AI应用(股价分析、量化交易)实战
2024年11月25日
AIGC Gradio系列学习教程之Components
2024年12月01日
Python3 `asyncio` — 异步 I/O,事件循环和并发工具
2024年11月30日
llama-factory SFT系列教程:大模型在自定义数据集 LoRA 训练与部署
2024年12月01日
Python 多线程和多进程用法
2024年11月24日
Python socket详解,全网最全教程
2024年11月27日