在项目管理、排程系统、制造业 APS 等场景中,
很多人都会发现一个问题:
甘特图不难画,难的是维护一个复杂的任务列表和交互逻辑。
Jordium GanttChart Vue3 v1.6.0,正是围绕这个痛点,对 Task Table、交互能力和跨端适配做了一次系统级升级。
一、为什么要做声明式 Task Table?
在真实业务中,Task Table 往往会演进成这样:
- 列越来越多
- 每一列都有条件渲染
- 列中嵌入状态、图标、按钮、进度
- 配置对象越来越难维护
v1.6.0 新增 TaskListColumn 组件,支持声明式定义任务表格列:
- 列结构一眼可读
- 更贴近 Vue 组件化思维
- 更利于复杂业务扩展和长期维护
这一步是从「配置驱动」走向「组件组合」。
二、Task Table 全面开放 Slots(Header / Default)
在声明式列基础上,Task Table 新增:
#header:自定义表头#default:自定义单元格内容
可以非常自然地实现:
- 状态标签 / 图标
- 进度条 / 风险提示
- 操作按钮 / 菜单
- 业务级子组件嵌入
Task Table 不再只是展示数据,而是业务 UI 的承载容器。
三、任务交互能力升级
1️⃣ 任务列表支持拖拽移动
支持在 Task List 中直接拖拽任务项:
- 调整任务顺序
- 调整层级关系
- 快速应对计划变更
在排程和项目管理系统中非常实用。
2️⃣ TaskBar 支持可视化关系线
支持在时间轴上:
- 添加任务依赖
- 删除关系线
- UI 与数据双向同步
相比纯数据配置,可视化方式对业务人员更友好。
四、支持 uni-app,覆盖多端场景
v1.6.0 针对 uni-app 场景进行了适配优化:
- 更克制的 DOM / 事件依赖
- 兼容 H5 / 小程序 / App
- 一套甘特图,多端复用
适合需要同时覆盖 Web 和移动端的项目。
五、Task List 显示与样式能力增强
-
Task 图标显示 / 隐藏配置
-
行级样式控制
task-list-row-class-nametask-list-row-style
可用于高亮关键任务、延期任务或风险任务。
六、兼容旧版本,升级更安心
为了避免破坏已有项目:
- 提供
task-list-column-render-mode - 可在旧版配置式 与 新版声明式之间切换
升级不强制迁移,风险可控。
七、视频演示
为了更直观地展示声明式 Task Table 和交互能力,这里准备了完整演示视频:
🎬 视频地址: www.bilibili.com/video/BV1Kf…
八、项目地址
📦 GitHub 仓库
github.com/nelson82012…
📦 Gitee 仓库
gitee.com/jordium/jor…
📘 在线文档 & Demo
nelson820125.github.io/jordium-gan…
写在最后
Jordium GanttChart Vue3 并不是一个“只负责展示时间轴”的组件,
而是希望成为 可以承载真实业务复杂度的甘特图基础设施。
如果你正在开发:
- 项目管理系统
- 计划排程 / APS
- Web + uni-app 的任务视图
欢迎在评论区交流使用场景和改进建议 🙌
Gitee 2025年度开源项目评选
🎉 该项目正在参加Gitee 2025年度开源项目评选活动,非常期望您的宝贵一票! 🎉