精东影业传媒：光影梦想的筑梦师，连接你我，共创视界
vue3甘特图 vxe-gantt 行内显示子任务拆分任务展示同时可拖拽调整任务日期,内展示子任务由 task-bar-subview-config 和父级任务设置type‘subview’ 来启用。
启用后会将所有子任务渲染到父级任务中可以直观的看到任务全程进度。
https://gantt.vxeui.com设置 task-bar-config.moveable 启用拖拽任务条移动日期功能设置 task-bar-config.resizable 启用拖拽任务条调整日期功能。
当设置为里子视图类型时无需要设置 start 开始日期和 end 结束日期templatedivvxe-ganttv-bindganttOptions/vxe-gantt/div/templatescriptsetupimport{reactive}fromvueconstganttOptionsreactive({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:
,end:
,progress:60},{id:10003,parentId:null,title:任务3,start:,end:,progress:0,type:subview},{id:10004,parentId:10003,title:任务4,start:
,end:
,progress:100},{id:10005,parentId:10003,title:任务5,start:,end:,progress:0,type:subview},{id:10006,parentId:10003,title:任务6,start:
,end:
,progress:90},{id:10007,parentId:10005,title:任务7,start:
,end:
,progress:50},{id:10008,parentId:null,title:任务8,start:,end:,progress:0,type:subview},{id:10009,parentId:10008,title:任务9,start:
,end:
,progress:60},{id:10010,parentId:10008,title:任务10,start:
,end:
,progress:80},{id:10011,parentId:10008,title:任务11,start:
,end:
,progress:80},{id:10012,parentId:null,title:任务12,start:,end:,progress:0,type:subview},{id:10013,parentId:10012,title:任务13,start:
,end:
,progress:80},{id:10014,parentId:10012,title:任务14,start:
,end:
,progress:80},{id:10015,parentId:10012,title:任务15,start:
,end:
,progress:100},{id:10016,parentId:10012,title:任务16,start:
,end:
,progress:90},{id:10017,parentId:10012,title:任务17,start:
,end:
,progress:80},{id:10018,parentId:null,title:任务18,start:
,end:
,progress:80},{id:10019,parentId:null,title:任务19,start:
,end:
,progress:80},{id:10020,parentId:null,title:任务20,start:,end:,progress:0,type:subview},{id:10021,parentId:10020,title:任务21,start:
,end:
,progress:80},{id:10022,parentId:10020,title:任务22,start:
,end:
,progress:80},{id:10023,parentId:10020,title:任务23,start:
,end:
,progress:100},{id:10024,parentId:10020,title:任务24,start:
,end:
,progress:100},{id:10025,parentId:10020,title:任务25,start:
,end:
,progress:100},{id:10026,parentId:null,title:任务26,start:
,end:
,progress:80},{id:10027,parentId:null,title:任务27,start:,end:,progress:0,type:subview},{id:10028,parentId:10027,title:任务28,start:
,end:
,progress:80},{id:10029,parentId:10027,title:任务29,start:
,end:
,progress:80},{id:10030,parentId:10027,title:任务30,start:
,end:
,progress:100},{id:10031,parentId:null,title:任务31,start:
,end:
,progress:80},{id:10032,parentId:null,title:任务32,start:,end:,progress:0,type:subview},{id:10033,parentId:10032,title:任务33,start:
,end:
,progress:80},{id:10034,parentId:10032,title:任务34,start:
,end:
,progress:80},{id:10035,parentId:10005,title:任务35,start:
,end:
,progress:80},{id:10036,parentId:10005,title:任务36,start:
,end:
,progress:80}]})/scripthttps://gitee.com/x-extends/vxe-gantt
k3kpCCA片-k3kpCCA片应用
