news 2026/4/3 4:50:15

vue3甘特图 vxe-gantt 行内显示子任务,拆分任务展示同时可拖拽调整任务日期

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
vue3甘特图 vxe-gantt 行内显示子任务,拆分任务展示同时可拖拽调整任务日期

vue3甘特图 vxe-gantt 行内显示子任务,拆分任务展示同时可拖拽调整任务日期,内展示子任务由 task-bar-subview-config 和父级任务设置type=‘subview’ 来启用。
启用后会将所有子任务渲染到父级任务中,可以直观的看到任务全程进度。

https://gantt.vxeui.com

设置 task-bar-config.moveable 启用拖拽任务条移动日期功能,设置 task-bar-config.resizable 启用拖拽任务条调整日期功能。
当设置为里子视图类型时,无需要设置 start 开始日期和 end 结束日期

<template><div><vxe-ganttv-bind="ganttOptions"></vxe-gantt></div></template><scriptsetup>import{reactive}from'vue'constganttOptions=reactive({border:true,height:500,rowConfig:{keyField:'id'// 行主键},treeConfig:{transform:true,// 自动将列表转为树结构rowField:'id',// 自定义树节点关联的主键parentField:'parentId'// 自定义树节点关联的父节点的字段名},taskConfig:{titleField:'title',// 自定义标题字段名startField:'start',// 自定义开始日期字段名endField:'end',// 自定义结束期字段名progressField:'progress',// 自定义进度值字段名typeField:'type'// 自定义渲染类型字段名},taskBarSubviewConfig:{showOverview:true// 是否显示任务总览,当子任务被展开后自动显示任务总览},taskBarConfig:{showContent:true,// 是否在任务条显示内容moveable:true,// 是否允许拖拽任务移动日期resizable:true,// 是否允许拖拽任务调整日期barStyle:{round:true,// 圆角bgColor:'#fca60b',// 任务条的背景颜色completedBgColor:'#65c16f',// 已完成部分任务条的背景颜色overviewBgColor:'#617b63'// 总览任务条的背景颜色}},columns:[{field:'title',title:'任务名称',treeNode:true}],data:[{id:10001,parentId:null,title:'任务1',start:'',end:'',progress:0,type:'subview'},{id:10002,parentId:10001,title:'任务2',start:'2024-03-01',end:'2024-03-03',progress:60},{id:10003,parentId:null,title:'任务3',start:'',end:'',progress:0,type:'subview'},{id:10004,parentId:10003,title:'任务4',start:'2024-03-01',end:'2024-03-02',progress:100},{id:10005,parentId:10003,title:'任务5',start:'',end:'',progress:0,type:'subview'},{id:10006,parentId:10003,title:'任务6',start:'2024-03-19',end:'2024-03-22',progress:90},{id:10007,parentId:10005,title:'任务7',start:'2024-03-03',end:'2024-03-05',progress:50},{id:10008,parentId:null,title:'任务8',start:'',end:'',progress:0,type:'subview'},{id:10009,parentId:10008,title:'任务9',start:'2024-03-02',end:'2024-03-03',progress:60},{id:10010,parentId:10008,title:'任务10',start:'2024-03-05',end:'2024-03-07',progress:80},{id:10011,parentId:10008,title:'任务11',start:'2024-03-08',end:'2024-03-11',progress:80},{id:10012,parentId:null,title:'任务12',start:'',end:'',progress:0,type:'subview'},{id:10013,parentId:10012,title:'任务13',start:'2024-03-04',end:'2024-03-05',progress:80},{id:10014,parentId:10012,title:'任务14',start:'2024-03-06',end:'2024-03-07',progress:80},{id:10015,parentId:10012,title:'任务15',start:'2024-03-09',end:'2024-03-12',progress:100},{id:10016,parentId:10012,title:'任务16',start:'2024-03-13',end:'2024-03-15',progress:90},{id:10017,parentId:10012,title:'任务17',start:'2024-03-17',end:'2024-03-21',progress:80},{id:10018,parentId:null,title:'任务18',start:'2024-03-02',end:'2024-03-06',progress:80},{id:10019,parentId:null,title:'任务19',start:'2024-03-06',end:'2024-03-11',progress:80},{id:10020,parentId:null,title:'任务20',start:'',end:'',progress:0,type:'subview'},{id:10021,parentId:10020,title:'任务21',start:'2024-03-18',end:'2024-03-21',progress:80},{id:10022,parentId:10020,title:'任务22',start:'2024-03-23',end:'2024-03-25',progress:80},{id:10023,parentId:10020,title:'任务23',start:'2024-03-27',end:'2024-04-02',progress:100},{id:10024,parentId:10020,title:'任务24',start:'2024-04-04',end:'2024-04-06',progress:100},{id:10025,parentId:10020,title:'任务25',start:'2024-04-07',end:'2024-04-11',progress:100},{id:10026,parentId:null,title:'任务26',start:'2024-03-20',end:'2024-04-01',progress:80},{id:10027,parentId:null,title:'任务27',start:'',end:'',progress:0,type:'subview'},{id:10028,parentId:10027,title:'任务28',start:'2024-03-10',end:'2024-03-13',progress:80},{id:10029,parentId:10027,title:'任务29',start:'2024-03-14',end:'2024-03-18',progress:80},{id:10030,parentId:10027,title:'任务30',start:'2024-03-19',end:'2024-03-25',progress:100},{id:10031,parentId:null,title:'任务31',start:'2024-03-17',end:'2024-03-22',progress:80},{id:10032,parentId:null,title:'任务32',start:'',end:'',progress:0,type:'subview'},{id:10033,parentId:10032,title:'任务33',start:'2024-03-09',end:'2024-03-14',progress:80},{id:10034,parentId:10032,title:'任务34',start:'2024-03-15',end:'2024-03-21',progress:80},{id:10035,parentId:10005,title:'任务35',start:'2024-03-06',end:'2024-03-11',progress:80},{id:10036,parentId:10005,title:'任务36',start:'2024-03-12',end:'2024-03-17',progress:80}]})</script>

https://gitee.com/x-extends/vxe-gantt

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

2026最全 Java 面试八股文汇总

Java 面试 Java 面试随着时间的改变而改变。在过去的日子里&#xff0c;当你知道 String 和 StringBuilder 的区别就能让你直接进入第二轮面试&#xff0c;但是现在问题变得越来越高级&#xff0c;面试官问的问题也更深入。 在我初入职场的时候&#xff0c;类似于 Vector 与 A…

作者头像 李华
网站建设 2026/3/27 16:54:27

华为OD技术面真题 - Mysql - 4

简单介绍一下Mysql中BinLog、RedoLog和UndoLog RedoLog 重做日志是 InnoDB 存储引擎独有的&#xff0c;它让 MySQL 拥有了崩溃恢复能力。在MySQL 实例挂了或宕机了&#xff0c;重启时&#xff0c;InnoDB 存储引擎会使用 redo log 恢复数据&#xff0c;保证数据的持久性与完整…

作者头像 李华
网站建设 2026/3/21 17:51:13

基于MATLAB的IIR滤波器设计与仿真

基于MATLAB的IIR滤波器设计与仿真研究 第一章 绪论 IIR&#xff08;无限长单位冲激响应&#xff09;滤波器是数字信号处理领域的核心器件&#xff0c;凭借相位非线性、硬件实现效率高、运算量小等特点&#xff0c;广泛应用于通信、音频处理、工业检测等场景。传统IIR滤波器设…

作者头像 李华
网站建设 2026/3/21 12:44:51

相片合成GIF怎么弄?教你无损合成的正确方法

平常拍的生活写真、旅行连拍、宝宝成长照、产品实拍图&#xff0c;想做成连续动态的GIF动图发朋友圈、做表情包、做电商展示、做短视频封面&#xff0c;都离不开相片合成GIF。 但很多人自己做时&#xff0c;总会遇到一堆问题&#xff1a;照片合成后GIF画质模糊、发灰、细节丢失…

作者头像 李华