vue2 甘特图 vxe-gantt 一行渲染多个子任务的配置

vue2 甘特图 vxe-gantt 一行渲染多个子任务的配置,但需要在父级任务直接显示所有子任务时,可以通过 task-bar-subview-config 和父级任务设置type= VxeGanttTaskType.Subview 来设置,会自动将所有子任务渲染到父级任务中

https://gantt.vxeui.com

image

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

posted @ 2026-01-30 11:20  可不简单  阅读(3)  评论(0)    收藏  举报