vue 甘特图 vxe-gantt table 拖拽任务调整开始日期和结束日期的使用，拖拽任务调整日期

vue 甘特图 vxe-gantt table 拖拽任务调整开始日期和结束日期的使用，拖拽任务调整日期，通过设置 task-bar-config.drag 启用拖拽任务条移动日期功能，设置 task-bar-config.resize 启用拖拽任务条调整日期功能

查看官网：https://gantt.vxeui.com/
gitbub：https://github.com/x-extends/vxe-gantt
gitee：https://gitee.com/x-extends/vxe-gantt

<template><div><vxe-ganttv-bind="ganttOptions"></vxe-gantt></div></template><scriptsetup>import{reactive}from'vue'constganttOptions=reactive({border:true,height:500,taskBarConfig:{showProgress:true,// 是否显示进度条showContent:true,// 是否在任务条显示内容move:true,// 是否允许拖拽任务移动日期resize:true,// 是否允许拖拽任务调整日期barStyle:{round:true,// 圆角bgColor:'#fca60b',// 任务条的背景颜色completedBgColor:'#65c16f'// 已完成部分任务条的背景颜色}},taskViewConfig:{tableStyle:{width:480// 表格宽度}},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}]})</script>

https://gitee.com/x-extends/vxe-gantt