vue2 甘特图 vxe-gantt 一行渲染多个子任务的配置,但需要在父级任务直接显示所有子任务时,可以通过 task-bar-subview-config 和父级任务设置type= VxeGanttTaskType.Subview 来设置,会自动将所有子任务渲染到父级任务中
https://gantt.vxeui.com
设置 task-bar-subview-config.showOverview 设置是否任务总览,当子任务被展开后自动显示任务总览
<template><div><vxe-ganttv-bind="ganttOptions"></vxe-gantt></div></template><script>import{VxeGanttTaskType}from'vxe-gantt'exportdefault{data(){constganttOptions={border:true,treeConfig:{transform:true,rowField:'id',parentField:'parentId'},taskConfig:{startField:'start',endField:'end',typeField:'type',progressField:'progress'},taskBarSubviewConfig:{showOverview:true},taskBarConfig:{showContent:true,barStyle:{round:true}},taskViewConfig:{tableStyle:{width:280}},columns:[{field:'title',title:'任务名称',minWidth:140,treeNode:true},{field:'start',title:'开始时间',width:100},{field:'end',title:'结束时间',width:100},{field:'progress',title:'进度(%)',width:80}],data:[{id:10001,parentId:null,title:'我的项目1',start:'',end:'',progress:0,type:VxeGanttTaskType.Subview},{id:10002,parentId:10001,title:'我的项目2',start:'2024-03-02',end:'2024-03-05',progress:70},{id:10003,parentId:null,title:'我的项目3',start:'',end:'',progress:0,type:VxeGanttTaskType.Subview},{id:10004,parentId:10003,title:'我的项目4',start:'2024-03-03',end:'2024-03-04',progress:50},{id:10005,parentId:10003,title:'我的项目5',start:'2024-03-05',end:'2024-03-06',progress:50},{id:10006,parentId:10003,title:'我的项目6',start:'2024-03-08',end:'2024-03-11',progress:60},{id:10008,parentId:null,title:'我的项目7',start:'',end:'',progress:0,type:VxeGanttTaskType.Subview},{id:10009,parentId:10008,title:'我的项目8',start:'2024-03-07',end:'2024-03-09',progress:50},{id:10010,parentId:10008,title:'我的项目9',start:'2024-03-10',end:'2024-03-12',progress:50},{id:10011,parentId:10008,title:'我的项目10',start:'2024-03-13',end:'2024-03-15',progress:50}]};return{ganttOptions};}};</script>https://gitee.com/x-extends/vxe-gantt