在项目管理过程中计划总是赶不上变化。当任务时间需要调整时手动修改开始/结束日期既繁琐又容易出错。vxe-gantt 提供了任务条拖拽功能允许用户通过鼠标直接拖拽甘特条来调整任务的起止时间同时自动更新数据中的日期字段让排期调整变得直观高效。启用任务条拖拽功能并通过 mode: ‘progress’ 配置实现按实际进度比例渲染拖拽效果。核心配置启用任务条拖拽通过 taskBarConfig 中的 moveable 和 resizable 属性可以分别控制任务条的整体移动和两端缩放配置项类型说明moveableboolean是否允许拖拽任务条整体移动改变开始和结束日期保持工期不变。resizableboolean是否允许拖拽任务条两端缩放调整开始或结束日期改变工期。taskBarMoveConfig.mode‘normal’‘progress’taskBarResizeConfig.mode‘normal’‘progress’关键点mode: ‘progress’ 使得任务条在拖拽过程中进度指示器会实时跟随鼠标位置按比例更新交互反馈更友好。代码以下示例展示了如何配置一个支持拖拽移动和缩放的甘特图并且日期精确到秒dateFormat: ‘yyyy-MM-dd HH:mm:ss’。templatedivvxe-ganttv-bindganttOptions/vxe-gantt/div/templatescriptsetupimport{reactive}fromvueconstganttOptionsreactive({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