vue 甘特图组件 vxe-gantt 拖拽任务自动对所有关联的任务进行排期

vxe-gantt 甘特图组件支持任务依赖关系，开启联动配置后，拖拽任务条移动 / 拉伸，会自动根据依赖规则重新计算、更新所有关联任务的时间，非常适合项目管理场景。

参数说明

通过两个配置项开启依赖联动自动排期：

1. taskBarMoveConfig.isSyncLinkTask: true：拖拽移动任务时，自动同步更新所有依赖任务日期
2. taskBarResizeConfig.isSyncLinkTask: true：拖拽拉伸（修改任务起止时间）时，自动同步更新所有依赖任务日期

依赖类型示例：VxeGanttDependencyType.FinishToStart（前置任务完成后，后置任务才开始，最常用），还支持开始到开始、完成到完成、开始到完成等依赖类型。

代码

<template>
  <div>
    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { VxeGanttDependencyType } from 'vxe-gantt'

const ganttOptions = reactive({
  border: true,
  height: 600,
  columnConfig: {
    resizable: true
  },
  rowConfig: {
    keyField: 'id' // 行主键
  },
  taskBarConfig: {
    showProgress: true, // 是否显示进度条
    showContent: true, // 是否在任务条显示内容
    moveable: true, // 是否允许拖拽任务移动日期
    resizable: true, // 是否允许拖拽任务调整日期
    linkCreatable: true, // 是否允许自定义创建依赖线
    barStyle: {
      round: true, // 圆角
      bgColor: '#fca60b', // 任务条的背景颜色
      completedBgColor: '#65c16f' // 已完成部分任务条的背景颜色
    }
  },
  taskLinkConfig: {
    isHover: true, // 当鼠标移到依赖线时，是否要高亮当前依赖线
    isCurrent: true, // 当鼠标点击依赖线时，是否要高亮当前依赖线
    isDblclickToRemove: true // 是否允许双击依赖线删除
  },
  taskViewConfig: {
    tableStyle: {
      width: 480 // 表格宽度
    }
  },
  taskBarMoveConfig: {
    isSyncLinkTask: true // 拖拽移动任务后自动更新依赖线关联任务的日期
  },
  taskBarResizeConfig: {
    isSyncLinkTask: true // 拖拽调整任务后自动更新依赖线关联任务的日期
  },
  links: [
    { from: 20001, to: 20002, type: VxeGanttDependencyType.FinishToStart },
    { from: 20001, to: 20003, type: VxeGanttDependencyType.FinishToStart },
    { from: 20002, to: 20004, type: VxeGanttDependencyType.FinishToStart },
    { from: 20003, to: 20005, type: VxeGanttDependencyType.FinishToStart },
    { from: 20004, to: 20006, type: VxeGanttDependencyType.FinishToStart },
    { from: 20005, to: 20006, type: VxeGanttDependencyType.FinishToStart },
    { from: 20006, to: 20007, type: VxeGanttDependencyType.FinishToStart },
    { from: 20007, to: 20008, type: VxeGanttDependencyType.FinishToStart },
    { from: 20008, to: 20009, type: VxeGanttDependencyType.FinishToStart },
    { from: 20009, to: 20010, type: VxeGanttDependencyType.FinishToStart }
  ],
  columns: [
    { type: 'seq', width: 70 },
    { field: 'title', title: '任务名称' },
    { field: 'start', title: '开始时间', width: 100 },
    { field: 'end', title: '结束时间', width: 100 },
    { field: 'progress', title: '进度(%)', width: 80 }
  ],
  data: [
    { id: 20001, title: '需求分析', start: '2025-01-06', end: '2025-01-08', progress: 100 },
    { id: 20002, title: 'UI设计', start: '2025-01-09', end: '2025-01-13', progress: 100 },
    { id: 20003, title: '数据库设计', start: '2025-01-09', end: '2025-01-11', progress: 100 },
    { id: 20004, title: '前端开发', start: '2025-01-16', end: '2025-01-20', progress: 70 },
    { id: 20005, title: '后端开发', start: '2025-01-12', end: '2025-01-20', progress: 80 },
    { id: 20006, title: '接口联调', start: '2025-01-21', end: '2025-01-23', progress: 30 },
    { id: 20007, title: '功能测试', start: '2025-01-24', end: '2025-01-27', progress: 0 },
    { id: 20008, title: '性能优化', start: '2025-01-29', end: '2025-01-31', progress: 0 },
    { id: 20009, title: '部署上线', start: '2025-02-01', end: '2025-02-04', progress: 0 },
    { id: 20010, title: '项目验收', start: '2025-02-07', end: '2025-02-09', progress: 0 }
  ]
})
</script>

关键要点 & 踩坑提示

1. keyField: 'id' 必须配置，依赖关系依靠任务 id 进行关联查找
2. isSyncLinkTask 分为移动和拉伸两个独立配置，按需开启
3. 联动逻辑：修改前置任务时间 → 自动递归更新所有下游任务，形成链式排期

常用事件

• 监听拖拽事件：@task-move-drag / @task-resize-drag，拿到变更前后任务数据，做后端保存
• 限制任务不可拖拽：taskBarConfig.moveable: false
• 自定义依赖线样式、任务条渲染插槽
• 支持里程碑任务、分组任务、节假日过滤

https://gantt.vxeui.com