vue2 甘特图 vxe-gantt 一行渲染多个子任务的配置，但需要在父级任务直接显示所有子任务时，可以通过 task-bar-subview-config 和父级任务设置type= VxeGanttTaskType.Subview 来设置，会自动将所有子任务渲染到父级任务中
设置 task-bar-subview-config.showOverview 设置是否任务总览，当子任务被展开后自动显示任务总览
html
<template>
<div>
<vxe-gantt v-bind="ganttOptions"></vxe-gantt>
</div>
</template>
<script>
import { VxeGanttTaskType } from 'vxe-gantt'
export default {
data() {
const ganttOptions = {
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>