Jordium GanttChart Vue3 v1.6.0:声明式 Task Table + Slots,让甘特图真正可扩展

156 阅读3分钟

在项目管理、排程系统、制造业 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-name
    • task-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年度开源项目评选活动,非常期望您的宝贵一票! 🎉

image.png