vue甘特图 vxe-gantt 如何实现双击连接线自动删除线功能支持二次确认https://gantt.vxeui.com配置说明实现该功能主要依赖 taskLinkConfig 对象中的两个属性isDblclickToRemove说明开启/关闭双击删除线的功能。设置为 true 时用户双击依赖线会触发删除逻辑。beforeRemoveMethod说明删除前的拦截钩子。如果该函数存在则会在实际删除前调用。您可以在此执行异步操作如弹窗确认其返回值决定是否继续删除。代码templatedivvxe-ganttv-bindganttOptions/vxe-gantt/div/templatescriptsetupimport{reactive}fromvueimport{VxeUI,VxeGanttDependencyType}fromvxe-ganttconstganttOptionsreactive({border:true,height:600,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,// 是否允许双击依赖线删除asyncbeforeRemoveMethod(){consttypeawaitVxeUI.modal.confirm({content:请确认是否删除线})if(typeconfirm){returntrue}else{VxeUI.modal.message({content:操作已取消,status:warning})}returnfalse}},taskViewConfig:{tableStyle:{width:480// 表格宽度}},links:[{from:10001,to:10002,type:VxeGanttDependencyType.FinishToFinish},{from:10004,to:10005,type:VxeGanttDependencyType.StartToStart},{from:10005,to:10006,type:VxeGanttDependencyType.FinishToStart},{from:10013,to:10012,type:VxeGanttDependencyType.StartToFinish}],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:10001,title:任务1,start:2024-03-01,end:2024-03-04,progress:3},{id:10002,title:任务2,start:2024-03-03,end:2024-03-08,progress:10},{id:10003,title:任务3,start:2024-03-03,end:2024-03-11,progress:90},{id:10004,title:任务4,start:2024-03-05,end:2024-03-11,progress:15},{id:10005,title:任务5,start:2024-03-08,end:2024-03-15,progress:100},{id:10006,title:任务6,start:2024-03-10,end:2024-03-21,progress:5},{id:10007,title:任务7,start:2024-03-15,end:2024-03-24,progress:70},{id:10008,title:任务8,start:2024-03-05,end:2024-03-15,progress:50},{id:10009,title:任务9,start:2024-03-19,end:2024-03-20,progress:5},{id:10010,title:任务10,start:2024-03-12,end:2024-03-20,progress:10},{id:10011,title:任务11,start:2024-03-01,end:2024-03-08,progress:90},{id:10012,title:任务12,start:2024-03-03,end:2024-03-06,progress:60},{id:10013,title:任务13,start:2024-03-02,end:2024-03-05,progress:50},{id:10014,title:任务14,start:2024-03-04,end:2024-03-15,progress:0},{id:10015,title:任务15,start:2024-03-01,end:2024-03-05,progress:30}]})/scripthttps://gitee.com/x-extends/vxe-gantt
vue甘特图 vxe-gantt 如何实现双击连接线自动删除线功能（含二次确认）
发布时间：2026/6/26 21:35:45
vue甘特图 vxe-gantt 如何实现双击连接线自动删除线功能支持二次确认https://gantt.vxeui.com配置说明实现该功能主要依赖 taskLinkConfig 对象中的两个属性isDblclickToRemove说明开启/关闭双击删除线的功能。设置为 true 时用户双击依赖线会触发删除逻辑。beforeRemoveMethod说明删除前的拦截钩子。如果该函数存在则会在实际删除前调用。您可以在此执行异步操作如弹窗确认其返回值决定是否继续删除。代码templatedivvxe-ganttv-bindganttOptions/vxe-gantt/div/templatescriptsetupimport{reactive}fromvueimport{VxeUI,VxeGanttDependencyType}fromvxe-ganttconstganttOptionsreactive({border:true,height:600,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,// 是否允许双击依赖线删除asyncbeforeRemoveMethod(){consttypeawaitVxeUI.modal.confirm({content:请确认是否删除线})if(typeconfirm){returntrue}else{VxeUI.modal.message({content:操作已取消,status:warning})}returnfalse}},taskViewConfig:{tableStyle:{width:480// 表格宽度}},links:[{from:10001,to:10002,type:VxeGanttDependencyType.FinishToFinish},{from:10004,to:10005,type:VxeGanttDependencyType.StartToStart},{from:10005,to:10006,type:VxeGanttDependencyType.FinishToStart},{from:10013,to:10012,type:VxeGanttDependencyType.StartToFinish}],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:10001,title:任务1,start:2024-03-01,end:2024-03-04,progress:3},{id:10002,title:任务2,start:2024-03-03,end:2024-03-08,progress:10},{id:10003,title:任务3,start:2024-03-03,end:2024-03-11,progress:90},{id:10004,title:任务4,start:2024-03-05,end:2024-03-11,progress:15},{id:10005,title:任务5,start:2024-03-08,end:2024-03-15,progress:100},{id:10006,title:任务6,start:2024-03-10,end:2024-03-21,progress:5},{id:10007,title:任务7,start:2024-03-15,end:2024-03-24,progress:70},{id:10008,title:任务8,start:2024-03-05,end:2024-03-15,progress:50},{id:10009,title:任务9,start:2024-03-19,end:2024-03-20,progress:5},{id:10010,title:任务10,start:2024-03-12,end:2024-03-20,progress:10},{id:10011,title:任务11,start:2024-03-01,end:2024-03-08,progress:90},{id:10012,title:任务12,start:2024-03-03,end:2024-03-06,progress:60},{id:10013,title:任务13,start:2024-03-02,end:2024-03-05,progress:50},{id:10014,title:任务14,start:2024-03-04,end:2024-03-15,progress:0},{id:10015,title:任务15,start:2024-03-01,end:2024-03-05,progress:30}]})/scripthttps://gitee.com/x-extends/vxe-gantt
)
