在项目管理中，里程碑是一个非常重要的概念，它用来标记项目中关键的时间点或重大事件，如“项目启动”、“需求评审完成”、“正式上线”等。与普通任务不同，里程碑不占用时间跨度，只表示一个时刻。
vxe-gantt 组件提供了对里程碑的原生支持。通过将任务的 type 设置为 VxeGanttTaskType.Milestone，即可将该任务渲染为菱形图标，而不是普通的时间条。
配置说明
实现里程碑功能，主要涉及以下几个配置点：
- 在数据项中定义该任务为里程碑类型 VxeGanttTaskType.Milestone
- start 字段，里程碑必须有开始时间，end 字段可留空
- progress 字段，里程碑通常没有进度概念，可设为 0
代码
<template>
<div>
<vxe-gantt v-bind="ganttOptions"></vxe-gantt>
</div>
</template>
<script setup>
import { reactive } from 'vue'
import { VxeGanttTaskType } from 'vxe-gantt'
const ganttOptions = reactive({
border: true,
taskViewConfig: {
gridding: {
leftSpacing: 1,
rightSpacing: 4
}
},
taskBarConfig: {
showContent: true,
showProgress: true,
barStyle: {
round: true,
bgColor: '#f56565',
completedBgColor: '#65c16f'
}
},
taskBarMilestoneConfig: {},
columns: [
{ field: 'title', title: '任务名称' },
{ field: 'start', title: '开始时间', width: 100 },
{ field: 'end', title: '结束时间', width: 100 }
],
data: [
{
id: 10001,
title: '项目启动会议',
start: '2024-03-01',
end: '',
progress: 0,
type: VxeGanttTaskType.Milestone
},
{ id: 10002, title: '项目启动与计划', start: '2024-03-03', end: '2024-03-08', progress: 80 },
{
id: 10003,
title: '需求评审完成',
start: '2024-03-03',
end: '',
progress: 0,
type: VxeGanttTaskType.Milestone
},
{ id: 10004, title: '技术及方案设计', start: '2024-03-05', end: '2024-03-11', progress: 80 },
{ id: 10005, title: '功能开发', start: '2024-03-08', end: '2024-03-15', progress: 70 },
{
id: 10007,
title: '测试环境发布',
start: '2024-03-11',
end: '',
progress: 0,
type: VxeGanttTaskType.Milestone
},
{ id: 10008, title: '系统测试', start: '2024-03-14', end: '2024-03-19', progress: 80 },
{
id: 10009,
title: '测试完成',
start: '2024-03-19',
end: '',
progress: 0,
type: VxeGanttTaskType.Milestone
},
{
id: 10010,
title: '正式发布上线',
start: '2024-03-20',
end: '',
progress: 0,
type: VxeGanttTaskType.Milestone
}
]
})
</script>
