vue3甘特图 vxe-gantt 行内显示子任务，拆分任务展示同时可拖拽调整任务日期,内展示子任务由 task-bar-subview-config 和父级任务设置type=‘subview’ 来启用。
启用后会将所有子任务渲染到父级任务中，可以直观的看到任务全程进度。
https://gantt.vxeui.com
设置 task-bar-config.moveable 启用拖拽任务条移动日期功能，设置 task-bar-config.resizable 启用拖拽任务条调整日期功能。
当设置为里子视图类型时，无需要设置 start 开始日期和 end 结束日期
<template><div><vxe-ganttv-bind="ganttOptions"></vxe-gantt></div></template><scriptsetup>import{reactive}from'vue'constganttOptions=reactive({border:true,height:500,rowConfig:{keyField:'id'// 行主键},treeConfig:{transform:true,// 自动将列表转为树结构rowField:'id',// 自定义树节点关联的主键parentField:'parentId'// 自定义树节点关联的父节点的字段名},taskConfig:{titleField:'title',// 自定义标题字段名startField:'start',// 自定义开始日期字段名endField:'end',// 自定义结束期字段名progressField:'progress',// 自定义进度值字段名typeField:'type'// 自定义渲染类型字段名},taskBarSubviewConfig:{showOverview:true// 是否显示任务总览，当子任务被展开后自动显示任务总览},taskBarConfig:{showContent:true,// 是否在任务条显示内容moveable:true,// 是否允许拖拽任务移动日期resizable:true,// 是否允许拖拽任务调整日期barStyle:{round:true,// 圆角bgColor:'#fca60b',// 任务条的背景颜色completedBgColor:'#65c16f',// 已完成部分任务条的背景颜色overviewBgColor:'#617b63'// 总览任务条的背景颜色}},columns:[{field:'title',title:'任务名称',treeNode:true}],data:[{id:10001,parentId:null,title:'任务1',start:'',end:'',progress:0,type:'subview'},{id:10002,parentId:10001,title:'任务2',start:'2024-03-01',end:'2024-03-03',progress:60},{id:10003,parentId:null,title:'任务3',start:'',end:'',progress:0,type:'subview'},{id:10004,parentId:10003,title:'任务4',start:'2024-03-01',end:'2024-03-02',progress:100},{id:10005,parentId:10003,title:'任务5',start:'',end:'',progress:0,type:'subview'},{id:10006,parentId:10003,title:'任务6',start:'2024-03-19',end:'2024-03-22',progress:90},{id:10007,parentId:10005,title:'任务7',start:'2024-03-03',end:'2024-03-05',progress:50},{id:10008,parentId:null,title:'任务8',start:'',end:'',progress:0,type:'subview'},{id:10009,parentId:10008,title:'任务9',start:'2024-03-02',end:'2024-03-03',progress:60},{id:10010,parentId:10008,title:'任务10',start:'2024-03-05',end:'2024-03-07',progress:80},{id:10011,parentId:10008,title:'任务11',start:'2024-03-08',end:'2024-03-11',progress:80},{id:10012,parentId:null,title:'任务12',start:'',end:'',progress:0,type:'subview'},{id:10013,parentId:10012,title:'任务13',start:'2024-03-04',end:'2024-03-05',progress:80},{id:10014,parentId:10012,title:'任务14',start:'2024-03-06',end:'2024-03-07',progress:80},{id:10015,parentId:10012,title:'任务15',start:'2024-03-09',end:'2024-03-12',progress:100},{id:10016,parentId:10012,title:'任务16',start:'2024-03-13',end:'2024-03-15',progress:90},{id:10017,parentId:10012,title:'任务17',start:'2024-03-17',end:'2024-03-21',progress:80},{id:10018,parentId:null,title:'任务18',start:'2024-03-02',end:'2024-03-06',progress:80},{id:10019,parentId:null,title:'任务19',start:'2024-03-06',end:'2024-03-11',progress:80},{id:10020,parentId:null,title:'任务20',start:'',end:'',progress:0,type:'subview'},{id:10021,parentId:10020,title:'任务21',start:'2024-03-18',end:'2024-03-21',progress:80},{id:10022,parentId:10020,title:'任务22',start:'2024-03-23',end:'2024-03-25',progress:80},{id:10023,parentId:10020,title:'任务23',start:'2024-03-27',end:'2024-04-02',progress:100},{id:10024,parentId:10020,title:'任务24',start:'2024-04-04',end:'2024-04-06',progress:100},{id:10025,parentId:10020,title:'任务25',start:'2024-04-07',end:'2024-04-11',progress:100},{id:10026,parentId:null,title:'任务26',start:'2024-03-20',end:'2024-04-01',progress:80},{id:10027,parentId:null,title:'任务27',start:'',end:'',progress:0,type:'subview'},{id:10028,parentId:10027,title:'任务28',start:'2024-03-10',end:'2024-03-13',progress:80},{id:10029,parentId:10027,title:'任务29',start:'2024-03-14',end:'2024-03-18',progress:80},{id:10030,parentId:10027,title:'任务30',start:'2024-03-19',end:'2024-03-25',progress:100},{id:10031,parentId:null,title:'任务31',start:'2024-03-17',end:'2024-03-22',progress:80},{id:10032,parentId:null,title:'任务32',start:'',end:'',progress:0,type:'subview'},{id:10033,parentId:10032,title:'任务33',start:'2024-03-09',end:'2024-03-14',progress:80},{id:10034,parentId:10032,title:'任务34',start:'2024-03-15',end:'2024-03-21',progress:80},{id:10035,parentId:10005,title:'任务35',start:'2024-03-06',end:'2024-03-11',progress:80},{id:10036,parentId:10005,title:'任务36',start:'2024-03-12',end:'2024-03-17',progress:80}]})</script>https://gitee.com/x-extends/vxe-gantt
)
