做Vue2后台项目最头疼的莫过于选一个合适的甘特图组件。表格可以选的开源库很多但真正能把“左侧表格右侧时间轴”结合得顺手的并不多。我们这边一直用vxe-table系列所以顺理成章尝试了配套的vxe-gantt。最初的需求很朴素一个迭代任务行希望在它后面的一条泳道里同时画上设计、开发、测试三个时间块而不是通过展开子行变成三行。这个“一行渲染多个子任务”的配置当时查了不少资料官方文档例子简单实际用起来远没想象中直接。这篇文章就把我的配置过程、踩过的坑和最终方案完整写出来给同样在vue2项目里折腾甘特图的开发者一个参考。1. 需求拆解为什么需要“一行渲染多个子任务”1.1 业务场景一个任务行里的多个独立时间块先还原一个真实场景。某产品迭代后台里一条数据叫“3.2.0版本迭代”它下面有需求分析、界面设计、前端开发、后端联调、测试验收这几个子任务。常规的甘特图展示方式是把子任务放在父任务的下一层用户点击展开箭头一行一行显示。这在子任务只有两三个时还好但当任务数量多、页面又要同时展示几条主业务线时左侧表格瞬间被撑出十几行右侧时间轴密密麻麻滚动起来非常吃力。当时的业务方提了个很直观的需求“能不能就在一条行里把所有子任务的时间块都画出来一眼看全整个迭代的时间安排”这就是“一行渲染多个子任务”的由来。更准确地说是希望一个资源或者一个父级事件对应一个水平泳道泳道内部横向排列多个并行或串行的时间条比如设计条从1号到3号开发条从4号到12号测试条从13号到15号。这样三块信息都在同一行内呈现视觉上紧凑信息密度高也更符合管理者的阅读习惯。1.2 与树形展开方式的区别vxe-gantt本身提供了一个类似树表的父子节点结构父任务可以展开子任务子任务在下一行显示。这种模式适合任务层级深、子任务需要独立维护进度的场景。但“一行多任务”完全不同它并不是层级嵌套而是把多个时间区间“压缩”到同一个行容器里。你可以把它想象成把原本三行的内容合并成一行但时间轴上依旧是三个独立的条形。这两种模式的区别很关键。树形展开时每个条形对应独立的行数据vxe-gantt可以直接根据行的开始时间和结束时间去绘制不需要额外的布局计算。而一行多任务时当前行数据里没有“一个开始时间”和“一个结束时间”它需要你把自己的子任务数组交给前端再由前端在渲染层把每个子任务的时间转换成坐标然后摆到正确的位置。说白了从数据模型到渲染方式都要自己重新组织一遍。1.3 选型思考为什么在Vue2仍然坚持用vxe-gantt当时也评估过其他方案。有些知名甘特图组件确实开箱即用但商业授权费用不低而且和已有的vxe-table表格风格很难完全统一。另一些开源库虽然功能强但严重依赖ES6新特性或者强制使用某个UI框架接到Vue2老项目里折腾成本很高。vxe-gantt的优势首先在于和vxe-table同一套设计语言左侧表格用vxe-table右侧时间轴用vxe-gantt视觉一致其次它对虚拟滚动、大数据渲染支持得不错在几千行任务下也能保持流畅最后因为它是普通Vue组件可以灵活使用插槽和自定义渲染正好适合“一行多任务”这种不走常规路的需求。当然用vxe-gantt不是没有代价。它的文档相对精简很多进阶用法需要自己看源码或者摸索。但如果你原本就在用vxe-table学习成本会低很多因为数据格式、事件模型、插槽用法都带着vxe系列的风格。2. vxe-gantt核心配置解析数据、渲染、行高2.1 基本数据模型与自定义扩展vxe-gantt的标准数据模型一般包含id、name、startTime、endTime这几个常用字段。组件会读取每一行的开始和结束时间计算出条形的横向位置和宽度。官方文档里也有父子数据的示例父行的children数组里放子任务通过展开折叠来切换。要做到一行渲染多个子任务我们不能再依赖固定的startTime和endTime。我采用的方式是保留行的id、name和children字段用于左侧表格展示但在每一行数据里额外增加一个自定义字段比如叫bars这个字段是一个数组数组里每一项是一个子任务的时间块{ id: 1001, name: 3.2.0版本迭代, startTime: 2024-01-01, endTime: 2024-01-15, bars: [ { name: 需求分析, start: 2024-01-01, end: 2024-01-03 }, { name: 界面设计, start: 2024-01-04, end: 2024-01-06 }, { name: 系统开发, start: 2024-01-07, end: 2024-01-12 } ] }这样设计的好处是左侧表格可以正常显示行名右侧时间轴通过自定义插槽读取bars数组分别绘制多个条形。父级startTime和endTime只是为了在时间轴上给整行一个可点击的区域或者背景框真正视觉上的多个任务块全部由bars决定。2.2 关键配置项与作用范围在vxe-gantt的组件绑定中有几个配置项会对后续实现产生直接影响。conf对象里可以配置时间轴的刻度单位、行高、左侧表格宽度、时间轴背景颜色等。比如把刻度单位设为day让每天一列同时把行高设得稍高一些给多个条形留出空间。rowHeight影响左侧表格的行高一般和右侧甘特图区域的每个泳道高度保持一致。还有一个很重要的配置是showField用于指定左侧表格显示哪个字段作为任务名称。默认可能是name如果我们想展示其他字段比如title可以在这里改。对于矩形条的渲染vxe-gantt提供了插槽机制来控制。不同版本里的插槽名可能有差异我用的版本里叫bar有的版本叫barSlot或者task。使用方式是在组件内部插入一个带有slotbar的模板然后通过作用域插槽拿到当前行的数据。这个插槽允许你完全自定义条形区域的HTML结构这是我们实现一行多任务的核心入口。2.3 一行多任务的核心思路理解了配置项之后核心思路就很清晰了不再让vxe-gantt根据单一行数据绘制一个条形而是借用它的自定义插槽让插槽里的内容输出多个条形。具体来说当vxe-gantt渲染到某一行时它会为这一行划定一个矩形区域这个区域在时间轴上的横向范围就是整个时间条。我们可以在这个区域内通过CSS定位每一个子任务的时间块。每个子任务的时间块用绝对定位的div实现left根据该子任务的开始时间相对整行开始时间的偏移计算width根据子任务的持续天数占整行时间范围的比例计算。比如行范围是1月1日到1月15日共15天。子任务“需求分析”是1月1日到1月3日那么它的left占行宽的0%width占行宽的20%3除以15。如果“系统开发”是1月7日到1月12日那么它的left是6100/1540%宽度是5100/15约33.3%。通过这样的换算把时间量变成像素比例再配合CSS定位就能让多个子任务整齐地排在同一行内。这就是“一行渲染多个子任务”最基本的思路剩下的事情就是把它落进vxe-gantt的插槽里并处理一些边界情况。3. 实操步骤从安装到“一行多任务”3.1 安装与引入vxe-gantt并不是一个独立的重量级框架它是vxe-table系列生态的一部分。安装时我直接同时安装了vxe-table和vxe-gantt避免版本不匹配。命令如下npm install vxe-table vxe-gantt --save然后在入口文件里引入并注册组件。注意顺序一般先把vxe-table的样式和组件注册好再注册甘特图组件。import Vue from vue import VxeTable from vxe-table import vxe-table/lib/style.css import VxeGantt from vxe-gantt import vxe-gantt/lib/style.css Vue.use(VxeTable) Vue.use(VxeGantt)如果你的项目里用了按需加载也可以使用import { VxeGantt }之类的按需引入写法。不过甘特图本身不轻直接全量引入问题也不大。3.2 基础模板结构先写一个最简单的模板确保甘特图能正常显示再慢慢加入自定义渲染。template div vxe-gantt refgantt height600 :dataganttData :confganttConf /vxe-gantt /div /template对应的数据export default { data() { return { ganttData: [ { id: 1001, name: 迭代开发, startTime: 2024-01-01, endTime: 2024-01-15 } ], ganttConf: { startDate: 2024-01-01, endDate: 2024-01-31, scale: day, rowHeight: 48, cellHeight: 24 } } } }这里的startDate和endDate是甘特图时间轴的全局范围。scale设为day表示按天列。行高设成48像素是为了后面一行内有空间放下三个子任务条形。3.3 自定义插槽一段核心代码接下来是重头戏。在vxe-gantt标签内部增加插槽然后使用作用域插槽拿到当前行数据循环渲染bars数组。vxe-gantt refgantt height600 :dataganttData :confganttConf template v-slot:bar{ row, range } div classbar-multi-wrapper div v-for(bar, index) in row.bars :keybar.name index classbar-multi-item :stylegetBarStyle(bar, range) :titlebar.name bar.start ~ bar.end {{ bar.name }} /div /div /template /vxe-gantt这里的row就是当前行数据range是vxe-gantt传入的行时间范围对象通常包含start和end也就是这一行在时间轴上的起止日期。getBarStyle是我们自定义的计算方法用来把每个子任务的时间转成百分比定位。getBarStyle的实现如下methods: { getBarStyle(bar, range) { const rangeStart new Date(range.start).getTime() const rangeEnd new Date(range.end).getTime() const barStart new Date(bar.start).getTime() const barEnd new Date(bar.end).getTime() const totalSpan rangeEnd - rangeStart const left (barStart - rangeStart) / totalSpan * 100 const width (barEnd - barStart) / totalSpan * 100 return { left: left %, width: width % } } }这里有个细节需要注意range.end如果是行结束时间那么它可能比最后一个子任务结束时间更大也可能更小。为了保证子任务能完整显示最好把range设置为这一行时间范围的“最大值”。我一般在构造ganttData时把行的startTime设置为所有子任务开始时间的最小值把行的endTime设置为所有子任务结束时间的最大值这样整行时间范围就覆盖了全部子任务。3.4 CSS处理多个条形在行内排列有了计算出的left和width还需要给每个子任务条形一个垂直位置防止它们全部叠在一起。在高度足够的情况下最简单的方案是垂直堆叠每个条形占一行内的一部分高度。.bar-multi-wrapper { position: relative; width: 100%; height: 100%; } .bar-multi-item { position: absolute; top: 4px; height: 14px; line-height: 14px; border-radius: 3px; background: #409eff; color: #fff; font-size: 12px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }如果只有一条子任务它固定在最上方。如果有第二条需要给第二条一个top偏移。这里我没有用第二、第三个CSS类去硬编码而是根据index动态计算top。比如每个条形高16px间距4px那么第index个条形的top就是index * 20 4像素。把getBarStyle调整一下getBarStyle(bar, range, index) { // ... 前面的 left 和 width 计算 return { left: left %, width: width %, top: index * 20 4 px } }在模板里调用时传入indexdiv v-for(bar, index) in row.bars :keybar.name index classbar-multi-item :stylegetBarStyle(bar, range, index) 这样多个子任务条形会在同一行内从上到下依次排列每一条都处在正确的时间坐标上。3.5 时间轴缩放与百分比计算我在第一次做的时候踩了一个坑时间轴支持按天、按周、按月缩放但行的时间范围不会变导致getBarStyle计算出的百分比是正确的但条形宽度会随缩放一起变化。本来这是甘特图应该有的表现但如果某个子任务的开始时间早于整行范围的开始时间或者结束时间晚于整行结束时间百分比就会超出100%条形被裁掉。解决方案是在数据层面保证整行的时间范围完全包裹所有子任务。如果一个父任务下面有子任务时间跨度超出了父任务预设的起止时间我会在加载数据时做一次“合并范围”的处理。用代码表达就是const min Math.min(startTime, ...bars.map(b b.start)) const max Math.max(endTime, ...bars.map(b b.end))然后把这个min和max赋给行数据的startTime和endTime。这样无论时间轴怎么缩放所有子任务条都能在行范围内被正确映射。4. 踩坑与优化真实项目的调优记录4.1 条形重叠与错位问题一开始我假设同一行的多个子任务不会在时间上重叠比如上一个子任务结束下一个才开始。但实际业务里经常出现并行子任务比如“前端开发”和“后端联调”同时进行时间重叠。如果仅仅按数组索引垂直堆叠重叠的时间条会上下排列虽然能看清但当并行任务很多时条形高度有限显示会很拥挤。更好的做法是给重叠任务做动态分轨类似电视节目排期算法。简单来说按时间排序后把每个任务尝试放入已有的轨道track如果与轨道内最后一个任务时间重叠就放到下一个轨道。这样同一时间内重叠的任务会占用不同垂直位置不会互相遮盖。轨道总数会动态影响行高如果行高不够需要相应增加。我在组件里临时用了这个策略。数据结构是二维数组tracks遍历bars时找到第一个与当前任务不冲突的轨道放进去。冲突判断就是当前任务的开始时间是否小于该轨道最后一个任务的结束时间。如果所有轨道都冲突新增一个轨道。最后根据每个任务所属的轨道下标计算top。这样渲染出来效果很好重叠任务有了明确的层次。代价是每个bar需要预先计算并保存一个track字段好在数据量不大性能上没有压力。4.2 虚拟滚动与大数据量表现vxe-gantt对基础条形有虚拟滚动优化但自定义插槽会破坏一部分优化。当数据量达到几千行每行又有多个子任务时渲染的DOM数量会暴增。我在一次压测中用1000行、每行平均3个子任务的数据测试首屏加载明显卡顿滚动时也会有掉帧。排查后发现主要瓶颈不是vxe-gantt本身而是我的循环渲染里没有合理使用key导致每次数据更新都重建大量DOM。优化方式是给每个子任务条增加一个真正稳定的唯一标识比如bar.id不要用数组索引。同时把bar插槽内部的模板拆成更小的子组件利用Vue组件级的更新粒度来减少不必要的渲染。另外如果只是需要展示任务里程碑而不是精细交互可以不用插槽而是用vxe-gantt自带的多条形功能。我查过一些版本里可能有multiBar之类的配置或者通过数据格式支持一个行内多个起始时间字段但在我的版本里没有直接找到稳定配置最终还是选用插槽方案。性能问题靠优化DOM结构解决后滚动流畅度提升明显。4.3 时间轴缩放联动vxe-gantt一般会提供时间轴缩放的按钮或事件比如从“日”切到“周”。组件内部会根据时间范围重新计算刻度但自定义插槽里的DOM不会自动重算因为插槽的内容最终是靠我们自己的数据和样式生成的。我遇到了一个场景用户把时间轴从“日”缩放到“月”左侧表格不变右侧每个格子的宽度变大但子任务的条形宽度还是按原来的百分比渲染导致条形的实际像素宽度没有随格子变宽而变宽。原因是我的百分比计算是基于行范围的而行范围不变所以百分比不变但甘特图内部每个格子的像素宽度变了vxe-gantt并没有强制自定义插槽内的元素使用新的像素基准。解决办法是监听时间轴变化事件然后强制刷新当前组件。在vxe-gantt上监听scale-change之类的回调事件触发后调用this.$refs.gantt.refresh()或者this.$forceUpdate()。同时把缩放后的格子宽度作为变量传入样式计算中这样条形宽度就能正确缩放。实际操作时我直接用了一个响应式变量记录当前的dayWidth每天宽度缩放时更新这个值然后getBarStyle里通过barEnd与barStart的天数差乘以dayWidth计算像素宽度替代百分比计算。这样更直接也不容易出误差。4.4 与左侧表格的滚动联动甘特图项目通常左边是任务表格右边是时间轴两边需要同步滚动。vxe-gantt如果单独使用它自身可以处理横向和纵向滚动。但如果你的左侧表格不是vxe-gantt自带的而是用vxe-table单独做的就需要通过事件同步。我采用的方案是监听右侧时间轴的滚动事件获取scrollTop然后赋值给左侧表格的滚动区域。反过来左侧表格滚动时也把scrollTop同步给甘特图。这样两个区域看起来是一个整体。这里有个细节同步滚动会触发浏览器原生滚动事件造成抖动所以需要加一个防抖比如在requestAnimationFrame里执行同步操作避免同步频率过高。vxe-gantt本身也支持配置左侧表格区域如果项目里能用它自带的表格就不需要额外的联动逻辑。但自带的表格列定制能力有限复杂的操作按钮、状态标签还是要靠外部表格来实现。两套方案各有利弊我后来选择了自带的表格列定制因为项目左侧需要展示进度条、优先级标记等通过自定义列模板也能实现而且省掉了滚动同步的麻烦。4.5 浏览器兼容性Vue2时代的老项目很多时候还要兼容某些老旧浏览器。自定义条形用了绝对定位和百分比宽度这些都是CSS2.1就支持的特性问题不大。主要是Date解析的兼容性比如把new Date(2024-01-01)这种字符串直接解析在某些浏览器上会得到Invalid Date。我统一用一个工具函数把日期字符串转成时间戳使用原生Date.parse并且在方法内部做了NaN判断避免因为一条脏数据导致整个甘特图崩溃。另一个兼容性点是行内overflow: hidden; text-overflow: ellipsis在老旧浏览器上如果容器宽度没设置好会不生效。解决办法是给每个自定义条形设置maxWidth: 100%并加上display: block确保文字超长时能够省略。5. 常见问题速查表我把实际使用中被问得比较多的问题整理成了一张表方便大家按图索骥。问题现象可能原因处理方法多个子任务显示到同一行但位置错乱行开始时间不是所有子任务的最小值用数据预处理合并子任务范围确保行范围包含所有子任务子任务互相重叠无法区分没有给每个子任务计算垂直轨道按时间排序使用轨道分配算法为每个子任务分配track再算top时间轴缩放后条形容器不跟随自定义插槽没有重新计算像素宽度监听时间轴变化事件用当前的dayWidth重新计算条形宽度并刷新组件左侧表格和右侧甘特图滚动不同步两套组件独立滚动监听滚动事件在requestAnimationFrame中同步scrollTop大量数据下页面卡顿自定义插槽渲染了过多DOM给每个子任务条设置稳定key拆分子组件避免全量更新某条数据的条形消失开始时间或结束时间解析失败使用统一的日期转换函数并为非法值设置默认的0%位置或隐藏该条文字显示过长超出条形条形宽度不够没有省略号增加max-width:100%和text-overflow:ellipsis并设置overflow:hidden行高不够多个条显示不全行高固定没有随子任务数量动态计算根据每行最大轨道数动态设置行高至少满足每个条形高度加间距这张表只记录了常见问题。实际上每个项目的数据构成都不一样遇到奇怪的现象建议先打开浏览器开发者工具查看插槽内渲染的元素实际占位再配合range数据打印判断。自定义插槽的问题多数不是组件bug而是坐标换算或者样式覆盖的问题。6. 定制化扩展空间一行多任务实现之后还有很多值得扩展的地方。比如给每个子任务条加颜色状态根据任务完成度、优先级或负责人不同显示不同背景色。我就在每个bar对象里加了一个status字段渲染时根据status映射到CSS类名。这样甘特图不仅展示时间还能传递“哪个任务延期”“哪个任务已完工”这类信息。再比如鼠标悬停提示原生title属性可以显示概要信息但样式简陋。如果项目里用了弹层组件可以把悬停内容换成popover展示负责人、完成百分比、依赖关系等更多字段。由于是自定义插槽这些都很容易接入。还有一个方向是让一行内的子任务支持拖拽调整时间。vxe-gantt自带条形拖拽但主要面向单条形。要支持多个子任务的拖拽需要把拖拽事件绑定到每个自定义条上并在拖拽过程中实时更新对应bar.start和bar.end。这个功能复杂度会上升不少但业务价值很高。我们在实际项目中做了简化版只允许拖动整个行范围不允许拖动单个子任务因为涉及到的依赖联动和校验逻辑确实比较多。“一行渲染多个子任务”并不只是画图技巧还改变了产品交互的逻辑。原来用户需要展开父任务才能看到子任务现在平铺到一行反而促使我们把子任务的数据抽出来单独管理。每次操作完成后合并范围、轨道分配、状态计算可以统一走一套数据整理函数保证表格区和甘特图区始终一致。如果你也正在vxe-gantt里做类似配置我的建议是先在小范围数据上把日期计算和插槽模板跑通然后再加入轨道分配和缩放联动。不要一上来就直接接真实接口否则数据里的特殊情况会让你很难分清是组件问题还是数据问题。等本地demo稳定了再逐步接入真实数据你会对这个组件的脾性熟悉很多。
做Vue2后台项目最头疼的莫过于选一个合适的甘特图组件。表格可以选的开源库很多但真正能把“左侧表格右侧时间轴”结合得顺手的并不多。我们这边一直用vxe-table系列所以顺理成章尝试了配套的vxe-gantt。最初的需求很朴素一个迭代任务行希望在它后面的一条泳道里同时画上设计、开发、测试三个时间块而不是通过展开子行变成三行。这个“一行渲染多个子任务”的配置当时查了不少资料官方文档例子简单实际用起来远没想象中直接。这篇文章就把我的配置过程、踩过的坑和最终方案完整写出来给同样在vue2项目里折腾甘特图的开发者一个参考。1. 需求拆解为什么需要“一行渲染多个子任务”1.1 业务场景一个任务行里的多个独立时间块先还原一个真实场景。某产品迭代后台里一条数据叫“3.2.0版本迭代”它下面有需求分析、界面设计、前端开发、后端联调、测试验收这几个子任务。常规的甘特图展示方式是把子任务放在父任务的下一层用户点击展开箭头一行一行显示。这在子任务只有两三个时还好但当任务数量多、页面又要同时展示几条主业务线时左侧表格瞬间被撑出十几行右侧时间轴密密麻麻滚动起来非常吃力。当时的业务方提了个很直观的需求“能不能就在一条行里把所有子任务的时间块都画出来一眼看全整个迭代的时间安排”这就是“一行渲染多个子任务”的由来。更准确地说是希望一个资源或者一个父级事件对应一个水平泳道泳道内部横向排列多个并行或串行的时间条比如设计条从1号到3号开发条从4号到12号测试条从13号到15号。这样三块信息都在同一行内呈现视觉上紧凑信息密度高也更符合管理者的阅读习惯。1.2 与树形展开方式的区别vxe-gantt本身提供了一个类似树表的父子节点结构父任务可以展开子任务子任务在下一行显示。这种模式适合任务层级深、子任务需要独立维护进度的场景。但“一行多任务”完全不同它并不是层级嵌套而是把多个时间区间“压缩”到同一个行容器里。你可以把它想象成把原本三行的内容合并成一行但时间轴上依旧是三个独立的条形。这两种模式的区别很关键。树形展开时每个条形对应独立的行数据vxe-gantt可以直接根据行的开始时间和结束时间去绘制不需要额外的布局计算。而一行多任务时当前行数据里没有“一个开始时间”和“一个结束时间”它需要你把自己的子任务数组交给前端再由前端在渲染层把每个子任务的时间转换成坐标然后摆到正确的位置。说白了从数据模型到渲染方式都要自己重新组织一遍。1.3 选型思考为什么在Vue2仍然坚持用vxe-gantt当时也评估过其他方案。有些知名甘特图组件确实开箱即用但商业授权费用不低而且和已有的vxe-table表格风格很难完全统一。另一些开源库虽然功能强但严重依赖ES6新特性或者强制使用某个UI框架接到Vue2老项目里折腾成本很高。vxe-gantt的优势首先在于和vxe-table同一套设计语言左侧表格用vxe-table右侧时间轴用vxe-gantt视觉一致其次它对虚拟滚动、大数据渲染支持得不错在几千行任务下也能保持流畅最后因为它是普通Vue组件可以灵活使用插槽和自定义渲染正好适合“一行多任务”这种不走常规路的需求。当然用vxe-gantt不是没有代价。它的文档相对精简很多进阶用法需要自己看源码或者摸索。但如果你原本就在用vxe-table学习成本会低很多因为数据格式、事件模型、插槽用法都带着vxe系列的风格。2. vxe-gantt核心配置解析数据、渲染、行高2.1 基本数据模型与自定义扩展vxe-gantt的标准数据模型一般包含id、name、startTime、endTime这几个常用字段。组件会读取每一行的开始和结束时间计算出条形的横向位置和宽度。官方文档里也有父子数据的示例父行的children数组里放子任务通过展开折叠来切换。要做到一行渲染多个子任务我们不能再依赖固定的startTime和endTime。我采用的方式是保留行的id、name和children字段用于左侧表格展示但在每一行数据里额外增加一个自定义字段比如叫bars这个字段是一个数组数组里每一项是一个子任务的时间块{ id: 1001, name: 3.2.0版本迭代, startTime: 2024-01-01, endTime: 2024-01-15, bars: [ { name: 需求分析, start: 2024-01-01, end: 2024-01-03 }, { name: 界面设计, start: 2024-01-04, end: 2024-01-06 }, { name: 系统开发, start: 2024-01-07, end: 2024-01-12 } ] }这样设计的好处是左侧表格可以正常显示行名右侧时间轴通过自定义插槽读取bars数组分别绘制多个条形。父级startTime和endTime只是为了在时间轴上给整行一个可点击的区域或者背景框真正视觉上的多个任务块全部由bars决定。2.2 关键配置项与作用范围在vxe-gantt的组件绑定中有几个配置项会对后续实现产生直接影响。conf对象里可以配置时间轴的刻度单位、行高、左侧表格宽度、时间轴背景颜色等。比如把刻度单位设为day让每天一列同时把行高设得稍高一些给多个条形留出空间。rowHeight影响左侧表格的行高一般和右侧甘特图区域的每个泳道高度保持一致。还有一个很重要的配置是showField用于指定左侧表格显示哪个字段作为任务名称。默认可能是name如果我们想展示其他字段比如title可以在这里改。对于矩形条的渲染vxe-gantt提供了插槽机制来控制。不同版本里的插槽名可能有差异我用的版本里叫bar有的版本叫barSlot或者task。使用方式是在组件内部插入一个带有slotbar的模板然后通过作用域插槽拿到当前行的数据。这个插槽允许你完全自定义条形区域的HTML结构这是我们实现一行多任务的核心入口。2.3 一行多任务的核心思路理解了配置项之后核心思路就很清晰了不再让vxe-gantt根据单一行数据绘制一个条形而是借用它的自定义插槽让插槽里的内容输出多个条形。具体来说当vxe-gantt渲染到某一行时它会为这一行划定一个矩形区域这个区域在时间轴上的横向范围就是整个时间条。我们可以在这个区域内通过CSS定位每一个子任务的时间块。每个子任务的时间块用绝对定位的div实现left根据该子任务的开始时间相对整行开始时间的偏移计算width根据子任务的持续天数占整行时间范围的比例计算。比如行范围是1月1日到1月15日共15天。子任务“需求分析”是1月1日到1月3日那么它的left占行宽的0%width占行宽的20%3除以15。如果“系统开发”是1月7日到1月12日那么它的left是6100/1540%宽度是5100/15约33.3%。通过这样的换算把时间量变成像素比例再配合CSS定位就能让多个子任务整齐地排在同一行内。这就是“一行渲染多个子任务”最基本的思路剩下的事情就是把它落进vxe-gantt的插槽里并处理一些边界情况。3. 实操步骤从安装到“一行多任务”3.1 安装与引入vxe-gantt并不是一个独立的重量级框架它是vxe-table系列生态的一部分。安装时我直接同时安装了vxe-table和vxe-gantt避免版本不匹配。命令如下npm install vxe-table vxe-gantt --save然后在入口文件里引入并注册组件。注意顺序一般先把vxe-table的样式和组件注册好再注册甘特图组件。import Vue from vue import VxeTable from vxe-table import vxe-table/lib/style.css import VxeGantt from vxe-gantt import vxe-gantt/lib/style.css Vue.use(VxeTable) Vue.use(VxeGantt)如果你的项目里用了按需加载也可以使用import { VxeGantt }之类的按需引入写法。不过甘特图本身不轻直接全量引入问题也不大。3.2 基础模板结构先写一个最简单的模板确保甘特图能正常显示再慢慢加入自定义渲染。template div vxe-gantt refgantt height600 :dataganttData :confganttConf /vxe-gantt /div /template对应的数据export default { data() { return { ganttData: [ { id: 1001, name: 迭代开发, startTime: 2024-01-01, endTime: 2024-01-15 } ], ganttConf: { startDate: 2024-01-01, endDate: 2024-01-31, scale: day, rowHeight: 48, cellHeight: 24 } } } }这里的startDate和endDate是甘特图时间轴的全局范围。scale设为day表示按天列。行高设成48像素是为了后面一行内有空间放下三个子任务条形。3.3 自定义插槽一段核心代码接下来是重头戏。在vxe-gantt标签内部增加插槽然后使用作用域插槽拿到当前行数据循环渲染bars数组。vxe-gantt refgantt height600 :dataganttData :confganttConf template v-slot:bar{ row, range } div classbar-multi-wrapper div v-for(bar, index) in row.bars :keybar.name index classbar-multi-item :stylegetBarStyle(bar, range) :titlebar.name bar.start ~ bar.end {{ bar.name }} /div /div /template /vxe-gantt这里的row就是当前行数据range是vxe-gantt传入的行时间范围对象通常包含start和end也就是这一行在时间轴上的起止日期。getBarStyle是我们自定义的计算方法用来把每个子任务的时间转成百分比定位。getBarStyle的实现如下methods: { getBarStyle(bar, range) { const rangeStart new Date(range.start).getTime() const rangeEnd new Date(range.end).getTime() const barStart new Date(bar.start).getTime() const barEnd new Date(bar.end).getTime() const totalSpan rangeEnd - rangeStart const left (barStart - rangeStart) / totalSpan * 100 const width (barEnd - barStart) / totalSpan * 100 return { left: left %, width: width % } } }这里有个细节需要注意range.end如果是行结束时间那么它可能比最后一个子任务结束时间更大也可能更小。为了保证子任务能完整显示最好把range设置为这一行时间范围的“最大值”。我一般在构造ganttData时把行的startTime设置为所有子任务开始时间的最小值把行的endTime设置为所有子任务结束时间的最大值这样整行时间范围就覆盖了全部子任务。3.4 CSS处理多个条形在行内排列有了计算出的left和width还需要给每个子任务条形一个垂直位置防止它们全部叠在一起。在高度足够的情况下最简单的方案是垂直堆叠每个条形占一行内的一部分高度。.bar-multi-wrapper { position: relative; width: 100%; height: 100%; } .bar-multi-item { position: absolute; top: 4px; height: 14px; line-height: 14px; border-radius: 3px; background: #409eff; color: #fff; font-size: 12px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }如果只有一条子任务它固定在最上方。如果有第二条需要给第二条一个top偏移。这里我没有用第二、第三个CSS类去硬编码而是根据index动态计算top。比如每个条形高16px间距4px那么第index个条形的top就是index * 20 4像素。把getBarStyle调整一下getBarStyle(bar, range, index) { // ... 前面的 left 和 width 计算 return { left: left %, width: width %, top: index * 20 4 px } }在模板里调用时传入indexdiv v-for(bar, index) in row.bars :keybar.name index classbar-multi-item :stylegetBarStyle(bar, range, index) 这样多个子任务条形会在同一行内从上到下依次排列每一条都处在正确的时间坐标上。3.5 时间轴缩放与百分比计算我在第一次做的时候踩了一个坑时间轴支持按天、按周、按月缩放但行的时间范围不会变导致getBarStyle计算出的百分比是正确的但条形宽度会随缩放一起变化。本来这是甘特图应该有的表现但如果某个子任务的开始时间早于整行范围的开始时间或者结束时间晚于整行结束时间百分比就会超出100%条形被裁掉。解决方案是在数据层面保证整行的时间范围完全包裹所有子任务。如果一个父任务下面有子任务时间跨度超出了父任务预设的起止时间我会在加载数据时做一次“合并范围”的处理。用代码表达就是const min Math.min(startTime, ...bars.map(b b.start)) const max Math.max(endTime, ...bars.map(b b.end))然后把这个min和max赋给行数据的startTime和endTime。这样无论时间轴怎么缩放所有子任务条都能在行范围内被正确映射。4. 踩坑与优化真实项目的调优记录4.1 条形重叠与错位问题一开始我假设同一行的多个子任务不会在时间上重叠比如上一个子任务结束下一个才开始。但实际业务里经常出现并行子任务比如“前端开发”和“后端联调”同时进行时间重叠。如果仅仅按数组索引垂直堆叠重叠的时间条会上下排列虽然能看清但当并行任务很多时条形高度有限显示会很拥挤。更好的做法是给重叠任务做动态分轨类似电视节目排期算法。简单来说按时间排序后把每个任务尝试放入已有的轨道track如果与轨道内最后一个任务时间重叠就放到下一个轨道。这样同一时间内重叠的任务会占用不同垂直位置不会互相遮盖。轨道总数会动态影响行高如果行高不够需要相应增加。我在组件里临时用了这个策略。数据结构是二维数组tracks遍历bars时找到第一个与当前任务不冲突的轨道放进去。冲突判断就是当前任务的开始时间是否小于该轨道最后一个任务的结束时间。如果所有轨道都冲突新增一个轨道。最后根据每个任务所属的轨道下标计算top。这样渲染出来效果很好重叠任务有了明确的层次。代价是每个bar需要预先计算并保存一个track字段好在数据量不大性能上没有压力。4.2 虚拟滚动与大数据量表现vxe-gantt对基础条形有虚拟滚动优化但自定义插槽会破坏一部分优化。当数据量达到几千行每行又有多个子任务时渲染的DOM数量会暴增。我在一次压测中用1000行、每行平均3个子任务的数据测试首屏加载明显卡顿滚动时也会有掉帧。排查后发现主要瓶颈不是vxe-gantt本身而是我的循环渲染里没有合理使用key导致每次数据更新都重建大量DOM。优化方式是给每个子任务条增加一个真正稳定的唯一标识比如bar.id不要用数组索引。同时把bar插槽内部的模板拆成更小的子组件利用Vue组件级的更新粒度来减少不必要的渲染。另外如果只是需要展示任务里程碑而不是精细交互可以不用插槽而是用vxe-gantt自带的多条形功能。我查过一些版本里可能有multiBar之类的配置或者通过数据格式支持一个行内多个起始时间字段但在我的版本里没有直接找到稳定配置最终还是选用插槽方案。性能问题靠优化DOM结构解决后滚动流畅度提升明显。4.3 时间轴缩放联动vxe-gantt一般会提供时间轴缩放的按钮或事件比如从“日”切到“周”。组件内部会根据时间范围重新计算刻度但自定义插槽里的DOM不会自动重算因为插槽的内容最终是靠我们自己的数据和样式生成的。我遇到了一个场景用户把时间轴从“日”缩放到“月”左侧表格不变右侧每个格子的宽度变大但子任务的条形宽度还是按原来的百分比渲染导致条形的实际像素宽度没有随格子变宽而变宽。原因是我的百分比计算是基于行范围的而行范围不变所以百分比不变但甘特图内部每个格子的像素宽度变了vxe-gantt并没有强制自定义插槽内的元素使用新的像素基准。解决办法是监听时间轴变化事件然后强制刷新当前组件。在vxe-gantt上监听scale-change之类的回调事件触发后调用this.$refs.gantt.refresh()或者this.$forceUpdate()。同时把缩放后的格子宽度作为变量传入样式计算中这样条形宽度就能正确缩放。实际操作时我直接用了一个响应式变量记录当前的dayWidth每天宽度缩放时更新这个值然后getBarStyle里通过barEnd与barStart的天数差乘以dayWidth计算像素宽度替代百分比计算。这样更直接也不容易出误差。4.4 与左侧表格的滚动联动甘特图项目通常左边是任务表格右边是时间轴两边需要同步滚动。vxe-gantt如果单独使用它自身可以处理横向和纵向滚动。但如果你的左侧表格不是vxe-gantt自带的而是用vxe-table单独做的就需要通过事件同步。我采用的方案是监听右侧时间轴的滚动事件获取scrollTop然后赋值给左侧表格的滚动区域。反过来左侧表格滚动时也把scrollTop同步给甘特图。这样两个区域看起来是一个整体。这里有个细节同步滚动会触发浏览器原生滚动事件造成抖动所以需要加一个防抖比如在requestAnimationFrame里执行同步操作避免同步频率过高。vxe-gantt本身也支持配置左侧表格区域如果项目里能用它自带的表格就不需要额外的联动逻辑。但自带的表格列定制能力有限复杂的操作按钮、状态标签还是要靠外部表格来实现。两套方案各有利弊我后来选择了自带的表格列定制因为项目左侧需要展示进度条、优先级标记等通过自定义列模板也能实现而且省掉了滚动同步的麻烦。4.5 浏览器兼容性Vue2时代的老项目很多时候还要兼容某些老旧浏览器。自定义条形用了绝对定位和百分比宽度这些都是CSS2.1就支持的特性问题不大。主要是Date解析的兼容性比如把new Date(2024-01-01)这种字符串直接解析在某些浏览器上会得到Invalid Date。我统一用一个工具函数把日期字符串转成时间戳使用原生Date.parse并且在方法内部做了NaN判断避免因为一条脏数据导致整个甘特图崩溃。另一个兼容性点是行内overflow: hidden; text-overflow: ellipsis在老旧浏览器上如果容器宽度没设置好会不生效。解决办法是给每个自定义条形设置maxWidth: 100%并加上display: block确保文字超长时能够省略。5. 常见问题速查表我把实际使用中被问得比较多的问题整理成了一张表方便大家按图索骥。问题现象可能原因处理方法多个子任务显示到同一行但位置错乱行开始时间不是所有子任务的最小值用数据预处理合并子任务范围确保行范围包含所有子任务子任务互相重叠无法区分没有给每个子任务计算垂直轨道按时间排序使用轨道分配算法为每个子任务分配track再算top时间轴缩放后条形容器不跟随自定义插槽没有重新计算像素宽度监听时间轴变化事件用当前的dayWidth重新计算条形宽度并刷新组件左侧表格和右侧甘特图滚动不同步两套组件独立滚动监听滚动事件在requestAnimationFrame中同步scrollTop大量数据下页面卡顿自定义插槽渲染了过多DOM给每个子任务条设置稳定key拆分子组件避免全量更新某条数据的条形消失开始时间或结束时间解析失败使用统一的日期转换函数并为非法值设置默认的0%位置或隐藏该条文字显示过长超出条形条形宽度不够没有省略号增加max-width:100%和text-overflow:ellipsis并设置overflow:hidden行高不够多个条显示不全行高固定没有随子任务数量动态计算根据每行最大轨道数动态设置行高至少满足每个条形高度加间距这张表只记录了常见问题。实际上每个项目的数据构成都不一样遇到奇怪的现象建议先打开浏览器开发者工具查看插槽内渲染的元素实际占位再配合range数据打印判断。自定义插槽的问题多数不是组件bug而是坐标换算或者样式覆盖的问题。6. 定制化扩展空间一行多任务实现之后还有很多值得扩展的地方。比如给每个子任务条加颜色状态根据任务完成度、优先级或负责人不同显示不同背景色。我就在每个bar对象里加了一个status字段渲染时根据status映射到CSS类名。这样甘特图不仅展示时间还能传递“哪个任务延期”“哪个任务已完工”这类信息。再比如鼠标悬停提示原生title属性可以显示概要信息但样式简陋。如果项目里用了弹层组件可以把悬停内容换成popover展示负责人、完成百分比、依赖关系等更多字段。由于是自定义插槽这些都很容易接入。还有一个方向是让一行内的子任务支持拖拽调整时间。vxe-gantt自带条形拖拽但主要面向单条形。要支持多个子任务的拖拽需要把拖拽事件绑定到每个自定义条上并在拖拽过程中实时更新对应bar.start和bar.end。这个功能复杂度会上升不少但业务价值很高。我们在实际项目中做了简化版只允许拖动整个行范围不允许拖动单个子任务因为涉及到的依赖联动和校验逻辑确实比较多。“一行渲染多个子任务”并不只是画图技巧还改变了产品交互的逻辑。原来用户需要展开父任务才能看到子任务现在平铺到一行反而促使我们把子任务的数据抽出来单独管理。每次操作完成后合并范围、轨道分配、状态计算可以统一走一套数据整理函数保证表格区和甘特图区始终一致。如果你也正在vxe-gantt里做类似配置我的建议是先在小范围数据上把日期计算和插槽模板跑通然后再加入轨道分配和缩放联动。不要一上来就直接接真实接口否则数据里的特殊情况会让你很难分清是组件问题还是数据问题。等本地demo稳定了再逐步接入真实数据你会对这个组件的脾性熟悉很多。
