vue 甘特图 vxe-gantt 任务里程碑类型的配置用法
<p>vue 甘特图 vxe-gantt 任务里程碑类型的配置用法</p><p>查看官网：https://gantt.vxeui.com/<br>
gitbub：https://github.com/x-extends/vxe-gantt<br>
gitee：https://gitee.com/x-extends/vxe-gantt</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202512/3563285-20251224090855183-1811332267.png"></p>
<p>通过设置 task-bar-milestone-config 和 type=moveable 启用里程碑类型</p>
<pre><code class="language-html"><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,
height: 500,
taskBarConfig: {
showProgress: true, // 是否显示进度条
showContent: true, // 是否在任务条显示内容
moveable: true, // 是否允许拖拽任务移动日期
resizable: true, // 是否允许拖拽任务调整日期
barStyle: {
round: true, // 圆角
bgColor: '#fca60b', // 任务条的背景颜色
completedBgColor: '#65c16f' // 已完成部分任务条的背景颜色
}
},
taskViewConfig: {
tableStyle: {
width: 280 // 表格宽度
},
gridding: {
leftSpacing: 1, // 左侧间距多少列
rightSpacing: 4 // 右侧间距多少列
}
},
taskBarMilestoneConfig: {
// 自定义里程碑图标状态颜色
iconStatus ({ row }) {
if (row.id === 10001) {
return 'error'
}
if (row.id === 10007) {
return 'success'
}
return 'warning'
}
},
columns: [
{ type: 'seq', width: 70 },
{ field: 'title', title: '任务名称' }
],
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, type: '' },
{ 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, type: '' },
{ id: 10005, title: '功能开发', start: '2024-03-08', end: '2024-03-15', progress: 70, type: '' },
{ 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, type: '' },
{ 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>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202512/3563285-20251224091038217-473717740.png"></p>
<p>使用依赖线</p>
<pre><code class="language-html"><template>
<div>
<vxe-gantt v-bind="ganttOptions"></vxe-gantt>
</div>
</template>
<script setup>
import { reactive } from 'vue'
import { VxeGanttDependencyType, VxeGanttTaskType } from 'vxe-gantt'
const ganttOptions = reactive({
border: true,
height: 500,
rowConfig: {
keyField: 'id' // 行主键
},
taskBarConfig: {
showProgress: true, // 是否显示进度条
showContent: true, // 是否在任务条显示内容
moveable: true, // 是否允许拖拽任务移动日期
resizable: true, // 是否允许拖拽任务调整日期
barStyle: {
round: true, // 圆角
bgColor: '#fca60b', // 任务条的背景颜色
completedBgColor: '#65c16f' // 已完成部分任务条的背景颜色
}
},
taskViewConfig: {
tableStyle: {
width: 280 // 表格宽度
},
gridding: {
leftSpacing: 1, // 左侧间距多少列
rightSpacing: 4 // 右侧间距多少列
}
},
taskBarMilestoneConfig: {
// 自定义里程碑图标
icon ({ row }) {
if (row.id === 10001) {
return 'vxe-icon-warning-triangle-fill'
}
if (row.id === 10007) {
return 'vxe-icon-square-fill'
}
if (row.id === 10009) {
return 'vxe-icon-warning-circle-fill'
}
return 'vxe-icon-radio-unchecked-fill'
},
// 自定义里程碑图标样式
iconStyle ({ row }) {
if (row.id === 10001) {
return {
color: '#65c16f'
}
}
if (row.id === 10007) {
return {
color: '#dc3cc7'
}
}
}
},
taskLinkConfig: {
lineType: 'flowDashed'
},
links: [
{ from: 10001, to: 10002, type: VxeGanttDependencyType.StartToFinish },
{ from: 10003, to: 10004, type: VxeGanttDependencyType.StartToStart },
{ from: 10007, to: 10008, type: VxeGanttDependencyType.StartToStart },
{ from: 10008, to: 10009, type: VxeGanttDependencyType.FinishToStart },
{ from: 10009, to: 10010, type: VxeGanttDependencyType.StartToStart }
],
columns: [
{ type: 'seq', width: 70 },
{ field: 'title', title: '任务名称' }
],
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, type: '' },
{ 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, type: '' },
{ id: 10005, title: '功能开发', start: '2024-03-08', end: '2024-03-15', progress: 70, type: '' },
{ 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, type: '' },
{ 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>
</code></pre>
<p>https://gitee.com/x-extends/vxe-gantt</p><br><br>
来源：https://www.cnblogs.com/qaz666/p/19390105
頁:
[1]