企业官网建设流程全解析

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

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

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

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

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

代码

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

<template><div><vxe-ganttv-bind="ganttOptions"></vxe-gantt></div></template><scriptsetup>import{reactive}from'vue'constganttOptions=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>

交互行为详解

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

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

https://gantt.vxeui.com