在项目管理、生产排程、研发计划等场景中甘特图是展示任务时间线与依赖关系的核心工具。任务依赖关系即“紧前紧后关系”决定了任务执行的先后顺序直接影响项目进度的计算与关键路径的识别。vxe-gantt 作为 Vxe 生态中的专业甘特图组件提供了四种标准的依赖关系类型并通过 links 配置轻松绘制任务之间的连接线。本文将详细解读每种依赖类型的含义并配合完整代码示例帮助您快速搭建带依赖关系的甘特图。类型说明vxe-gantt 通过枚举 VxeGanttDependencyType 定义了四种依赖类型与项目管理国际标准一致类型值枚举常量含义图示说明0FinishToStart完成后开始FS前置任务完成后后续任务才能开始。这是最常见、最严格的依赖关系。任务A结束 → 任务B开始1StartToFinish开始到完成SF前置任务开始后后续任务才能完成。该类型较少使用常见于某些特殊工序。任务A开始 → 任务B结束2StartToStart开始后才开始SS前置任务开始后后续任务才能开始。适用于任务可并行启动的场景。任务A开始 → 任务B开始3FinishToFinish完成到完成FF前置任务完成后后续任务才能完成。常用于需要同步验收的场景。任务A结束 → 任务B结束在配置 links 时from 表示前置任务依赖源to 表示后续任务依赖目标。箭头的方向由 from 指向 to。核心配置解析vxe-gantt 通过独立的 links 数组来定义所有依赖连线每条连线包含三个属性links:[{from:10001,to:10002,type:VxeGanttDependencyType.FinishToStart},// ...]from前置任务的 id对应 rowConfig.keyField 字段to后置任务的 idtype依赖类型使用枚举值组件会自动根据任务的时间范围start / end和依赖类型计算连接线的起点与终点并绘制带箭头的曲线或折线。若依赖关系在时间逻辑上不合理如 FS 依赖中前置任务结束时间晚于后置任务开始时间连接线仍会绘制但会以红色或警告样式提示用户具体视觉效果取决于主题。代码templatedivvxe-ganttv-bindganttOptions/vxe-gantt/div/templatescriptsetupimport{reactive}fromvueimport{VxeGanttDependencyType}fromvxe-ganttconstganttOptionsreactive({border:true,height:600,rowConfig:{keyField:id// 行主键},taskBarConfig:{showProgress:true,// 是否显示进度条showContent:true,// 是否在任务条显示内容moveable:true,// 是否允许拖拽任务移动日期resizable:true,// 是否允许拖拽任务调整日期barStyle:{round:true,// 圆角bgColor:#fca60b,// 任务条的背景颜色completedBgColor:#65c16f// 已完成部分任务条的背景颜色}},taskViewConfig:{tableStyle:{width:480// 表格宽度}},links:[{from:10001,to:10002,type:VxeGanttDependencyType.FinishToFinish},{from:10004,to:10005,type:VxeGanttDependencyType.StartToStart},{from:10005,to:10006,type:VxeGanttDependencyType.FinishToStart},{from:10013,to:10012,type:VxeGanttDependencyType.StartToFinish}],columns:[{type:seq,width:70},{field:title,title:任务名称},{field:start,title:开始时间,width:100},{field:end,title:结束时间,width:100},{field:progress,title:进度(%),width:80}],data:[{id:10001,title:任务1,start:2024-03-01,end:2024-03-04,progress:3},{id:10002,title:任务2,start:2024-03-03,end:2024-03-08,progress:10},{id:10003,title:任务3,start:2024-03-03,end:2024-03-11,progress:90},{id:10004,title:任务4,start:2024-03-05,end:2024-03-11,progress:15},{id:10005,title:任务5,start:2024-03-08,end:2024-03-15,progress:100},{id:10006,title:任务6,start:2024-03-10,end:2024-03-21,progress:5},{id:10007,title:任务7,start:2024-03-15,end:2024-03-24,progress:70},{id:10008,title:任务8,start:2024-03-05,end:2024-03-15,progress:50},{id:10009,title:任务9,start:2024-03-19,end:2024-03-20,progress:5},{id:10010,title:任务10,start:2024-03-12,end:2024-03-20,progress:10},{id:10011,title:任务11,start:2024-03-01,end:2024-03-08,progress:90},{id:10012,title:任务12,start:2024-03-03,end:2024-03-06,progress:60},{id:10013,title:任务13,start:2024-03-02,end:2024-03-05,progress:50},{id:10014,title:任务14,start:2024-03-04,end:2024-03-15,progress:0},{id:10015,title:任务15,start:2024-03-01,end:2024-03-05,progress:30}]})/script注意事项与最佳实践数据一致性links 中的 from / to 值必须在 data 中存在否则该连线会被忽略或报错。任务的 start / end 日期格式需与组件默认解析格式一致示例中为 ‘YYYY-MM-DD’也可通过 format 配置自定义。性能考量当任务数超过 100 且依赖关系密集时连接线数量激增最多可达 N*(N-1)/2 条可能影响渲染性能。建议仅配置必要的依赖关系并开启虚拟滚动scrollY优化长列表。vxe-gantt 通过简洁的 links 配置完美支持了项目管理中四种标准的任务依赖类型FS、SF、SS、FF并自动绘制连接线极大降低了甘特图开发的复杂度。配合丰富的交互配置拖拽、调整、进度展示可快速构建专业级的项目计划工具。若您需要更复杂的依赖规则如滞后/提前量、日历例外可结合组件的事件监听与自定义计算实现。https://gantt.vxeui.com