vue2 甘特圖 vxe-gantt 一行渲染多個子任務的配置，但需要在父級任務直接顯示所有子任務時，可以通過 task-bar-subview-config 和父級任務設置type= VxeGanttTaskType.Subview 來設置，會自動將所有子任務渲染到父級任務中

https://gantt.vxeui.com

設置 task-bar-subview-config.showOverview 設置是否任務總覽，當子任務被展開後自動顯示任務總覽

<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>

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