vue 甘特图 vxe-gantt 设置每个进度条分为计划和实际两条，实现上下分布任务条，实现方式是利用子任务的子视图渲染模式，来间每条任务拆分成2条子任务，就可以利用自带的子视图渲染功能来渲染。
由于放2行超出默认高度，所以还需要通过 cell-config.height设置一下行高，再通过树形表格的子任务来渲染
html
<template>
<div>
<vxe-gantt v-bind="ganttOptions"></vxe-gantt>
</div>
</template>
<script setup>
import { reactive } from 'vue'
import { VxeGanttTaskType } from 'vxe-gantt'
import XEUtils from 'xe-utils'
const ganttOptions = reactive({
border: true,
height: 500,
loading: false,
cellConfig: {
height: 60
},
treeConfig: {
transform: true,
rowField: 'id',
parentField: 'parentId'
},
taskConfig: {
startField: 'start',
endField: 'end',
typeField: 'type'
},
taskBarSubviewConfig: {
barStyle ({ row }) {
if (row.flag === 1) {
return {
transform: 'translateY(-24px)',
'--vxe-ui-gantt-view-task-bar-completed-background-color': '#409eff'
}
}
if (row.flag === 2) {
return {
transform: 'translateY(1px)',
'--vxe-ui-gantt-view-task-bar-completed-background-color': '#31d231'
}
}
}
},
taskBarConfig: {
showContent: true,
barStyle: {
round: true
}
},
taskViewConfig: {
tableStyle: {
width: 480
}
},
columns: [
{ field: 'title', title: '任务名称', minWidth: 100 },
{ field: 'planStartDate', title: '计划开始时间', width: 100 },
{ field: 'planEndDate', title: '计划结束时间', width: 100 },
{ field: 'actualStartDate', title: '实际开始时间', width: 100 },
{ field: 'actualEndDate', title: '实际结束时间', width: 100 }
],
data: []
})
// 模拟后端接口
const loadList = () => {
ganttOptions.loading = true
setTimeout(() => {
const list = [
{ id: 10001, parentId: null, title: 'A项目', planStartDate: '2024-03-03', planEndDate: '2024-03-15', actualStartDate: '2024-03-03', actualEndDate: '2024-03-12' },
{ id: 10002, parentId: null, title: 'B项目', planStartDate: '2024-03-10', planEndDate: '2024-03-25', actualStartDate: '2024-03-08', actualEndDate: '2024-03-16' },
{ id: 10003, parentId: null, title: 'C项目', planStartDate: '2024-03-20', planEndDate: '2024-04-10', actualStartDate: '2024-03-22', actualEndDate: '2024-04-01' },
{ id: 10004, parentId: null, title: 'D项目', planStartDate: '2024-03-28', planEndDate: '2024-04-19', actualStartDate: '2024-03-28', actualEndDate: '2024-04-12' },
{ id: 10005, parentId: null, title: 'E项目', planStartDate: '2024-04-05', planEndDate: '2024-04-28', actualStartDate: '2024-04-01', actualEndDate: '2024-04-24' }
]
// 转成子任务视图
const ganttData = []
list.forEach(item => {
const currRow = XEUtils.assign({}, item, { type: VxeGanttTaskType.Subview })
const planRow = XEUtils.assign({}, item, {
id: 10000000 + item.id,
title: '计划',
parentId: item.id,
start: item.planStartDate,
end: item.planEndDate,
flag: 1
})
const actualRow = XEUtils.assign({}, item, {
id: 20000000 + item.id,
parentId: item.id,
title: '实际',
start: item.actualStartDate,
end: item.actualEndDate,
flag: 2
})
ganttData.push(currRow)
ganttData.push(planRow)
ganttData.push(actualRow)
})
ganttOptions.data = ganttData
ganttOptions.loading = false
}, 200)
}
loadList()
</script>