news 2026/5/2 19:50:52

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
vue2 甘特图 vxe-gantt 一行渲染多个子任务的配置

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

https://gantt.vxeui.com


设置 task-bar-subview-config.showOverview 设置是否任务总览,当子任务被展开后自动显示任务总览

<template><div><vxe-ganttv-bind="ganttOptions"></vxe-gantt></div></template><script>import{VxeGanttTaskType}from'vxe-gantt'exportdefault{data(){constganttOptions={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

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/1 19:27:49

AI写论文哪个软件最好?6款实测后,只有它能搞定毕业论文全流程

“用 ChatGPT 写的文献查不到原文”“WPS AI 生成的框架逻辑断层”“秘塔写作猫改完语句不通”—— 毕业季实测 6 款热门 AI 写论文工具后&#xff0c;发现多数工具只停留在 “凑字数” 层面&#xff0c;要么文献虚假、要么功能单一&#xff0c;根本无法支撑毕业论文的严苛要求…

作者头像 李华
网站建设 2026/4/24 9:27:33

密码重置功能操作步骤测试指南

密码重置功能是用户账户安全的核心环节&#xff0c;但实施不当可能导致严重漏洞&#xff08;如未授权访问或数据泄露&#xff09;。针对软件测试从业者&#xff0c;本文提供系统化的操作步骤框架&#xff0c;涵盖测试设计、执行与优化。基于安全优先原则&#xff0c;步骤分为三…

作者头像 李华
网站建设 2026/4/23 16:38:10

软件测试面试必问的经典面试题

今天这篇帖子主要讲解之前面试自己面试过程中或者周围人面试过程中经常被问到且比较经典的面试题&#xff0c;可以先收藏慢慢看。如有异议或者有想问的问题&#xff0c;可以在评论区留言&#xff0c;看到后将在第一时间内回复! 1、软件测试的流程是什么&#xff1f;   分析&…

作者头像 李华
网站建设 2026/5/1 6:45:12

【计算机毕业设计案例】基于web的心理科普及心理治愈网站基于SpringBoot的心理健康咨询系统心理健康交流系统的设计与实现(程序+文档+讲解+定制)

博主介绍&#xff1a;✌️码农一枚 &#xff0c;专注于大学生项目实战开发、讲解和毕业&#x1f6a2;文撰写修改等。全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围&#xff1a;&am…

作者头像 李华
网站建设 2026/4/26 9:01:18

200smart 与威纶通触摸屏实现平面两轴直线插补(Ver1.2.7)

直线插补Ver1.2.7 1.200smart 2.威纶通触摸屏 3.平面两轴直线插补&#xff0c;使用pls指令编写。 4.不带加减速在自动化控制领域&#xff0c;直线插补是一项基础且重要的功能&#xff0c;今天就来聊聊基于 200smart 以及威纶通触摸屏实现平面两轴直线插补的事儿&#xff0c;而且…

作者头像 李华