vue 甘特图 vxe-gantt 任务条拖拽自动更新日期

在项目管理过程中，计划总是赶不上变化。当任务时间需要调整时，手动修改开始/结束日期既繁琐又容易出错。vxe-gantt 提供了任务条拖拽功能，允许用户通过鼠标直接拖拽甘特条来调整任务的起止时间，同时自动更新数据中的日期字段，让排期调整变得直观高效。

启用任务条拖拽功能，并通过 mode: 'progress' 配置实现按实际进度比例渲染拖拽效果。

核心配置：启用任务条拖拽

通过 taskBarConfig 中的 moveable 和 resizable 属性，可以分别控制任务条的整体移动和两端缩放：

配置项	类型	说明
moveable	boolean	是否允许拖拽任务条整体移动（改变开始和结束日期，保持工期不变）。
resizable	boolean	是否允许拖拽任务条两端缩放（调整开始或结束日期，改变工期）。
taskBarMoveConfig.mode	'normal'	'progress'
taskBarResizeConfig.mode	'normal'	'progress'

关键点：mode: 'progress' 使得任务条在拖拽过程中，进度指示器会实时跟随鼠标位置按比例更新，交互反馈更友好。

代码

以下示例展示了如何配置一个支持拖拽移动和缩放的甘特图，并且日期精确到秒（dateFormat: 'yyyy-MM-dd HH:mm:ss'）。

html 复制代码

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

<script setup>
import { reactive } from 'vue'

const ganttOptions = reactive({
  border: true,
  showOverflow: true,
  columnConfig: {
    resizable: true
  },
  taskConfig: {
    dateFormat: 'yyyy-MM-dd HH:mm:ss'
  },
  taskBarConfig: {
    showProgress: true, // 是否显示进度条
    showContent: true, // 是否在任务条显示内容
    moveable: true, // 是否允许拖拽任务移动日期
    resizable: true, // 是否允许拖拽任务调整日期
    barStyle: {
      round: true, // 圆角
      bgColor: '#fca60b', // 任务条的背景颜色
      completedBgColor: '#65c16f' // 已完成部分任务条的背景颜色
    }
  },
  taskViewConfig: {
    scales: [{ type: 'month' }, { type: 'date', step: 3 }],
    tableStyle: {
      width: 480 // 表格宽度
    },
    viewStyle: {
      cellWidth: 120 // 单元格宽度
    }
  },
  taskBarMoveConfig: {
    mode: 'progress' // 按实际拖拽进度比例进行渲染
  },
  taskBarResizeConfig: {
    mode: 'progress' // 按实际拖拽进度比例进行渲染
  },
  columns: [
    { type: 'seq', field: 'seq', width: 70 },
    { field: 'title', title: '任务名称' },
    { field: 'start', title: '开始时间', width: 160 },
    { field: 'end', title: '结束时间', width: 160 }
  ],
  data: [
    { id: 10001, title: '任务1', start: '2024-02-27 08:30:00', end: '2024-03-04 12:30:00', progress: 50 },
    { id: 10002, title: '任务2', start: '2024-03-03 09:30:40', end: '2024-03-07 11:40:50', progress: 85 },
    { id: 10003, title: '任务3', start: '2024-03-06 10:30:00', end: '2024-03-10 14:10:30', progress: 90 },
    { id: 10004, title: '任务4', start: '2024-03-12 11:00:50', end: '2024-03-19 15:30:10', progress: 75 },
    { id: 10005, title: '任务5', start: '2024-03-18 12:30:00', end: '2024-03-28 18:30:00', progress: 100 },
    { id: 10006, title: '任务6', start: '2024-03-26 14:12:10', end: '2024-04-06 20:30:10', progress: 60 }
  ]
})
</script>

交互行为详解

操作	效果	数据变化
拖拽任务条中部	整体移动任务条，保持工期不变	start 和 end 同时增加或减少相同天数
拖拽任务条左右两端	缩放任务条，改变工期	start 或 end 单独变化，工期相应增减
拖拽过程中的进度条	进度指示器跟随鼠标实时更新（mode: 'progress'）	最终 progress 值同步更新

拖拽过程中，表格中的"开始时间"和"结束时间"会实时更新，无需手动保存。

通过简单的配置，vxe-gantt 让任务排期调整变得像拖拽卡片一样直观，无论是应对项目延期，还是微调任务顺序，用户都能通过鼠标拖拽快速完成，极大提升了排期管理的效率。

https://gantt.vxeui.com