vue3甘特图 vxe-gantt 行内显示子任务，拆分任务展示同时可拖拽调整任务日期,内展示子任务由 task-bar-subview-config 和父级任务设置type='subview' 来启用。
启用后会将所有子任务渲染到父级任务中，可以直观的看到任务全程进度。
设置 task-bar-config.moveable 启用拖拽任务条移动日期功能，设置 task-bar-config.resizable 启用拖拽任务条调整日期功能。
当设置为里子视图类型时，无需要设置 start 开始日期和 end 结束日期
html
<template>
<div>
<vxe-gantt v-bind="ganttOptions"></vxe-gantt>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const ganttOptions = 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>