先说结论
2026 年 9 月 24 日,我提交给 vuejs/awesome-vue 的 PR #4553 被维护者 Jogai 合并,vtable-guild 现在出现在 UI Components > Table 分类下。
awesome-vue 是 vuejs 组织下的社区精选清单,很多人找 Vue 生态轮子的第一站就是它。对一个个人维护的开源组件来说,这算是一次不小的认可。
合并时维护者还留了一句:
Nice project! The playground opens with older versions selected, just so you know.
被夸的同时顺手被提了个 bug —— 在线 Playground 默认打开的是旧版本。当天我就修掉了(fix(play): default playground version selects to the latest published),现在打开默认就是最新发布版。开源最快乐的时刻之一,大概就是这种「有人认真点开看过」的反馈。
vtable-guild 是什么
一句话:保留你熟悉的 columns 心智,补上虚拟滚动和一套真正能改的样式系统。
如果你在用 ant-design-vue 或 element-plus,下面几件事大概率戳过你:
| ant-design-vue 4.x | element-plus 2.x | vtable-guild | |
|---|---|---|---|
| **十万行怎么滚** | `a-table` 不内置虚拟滚动 | 要换成 `el-table-v2`,另一套 API | `virtual` + `scroll.y`,还是同一套 `columns` |
| **几百列怎么滚** | 没有横向虚拟化 | `el-table-v2` 只虚拟化行 | `virtualColumn`,200 列只渲染视口内的十几列 |
| **换一套视觉** | — | — | `themePreset: 'antdv' | 'element-plus'` |
| **改某个单元格样式** | 覆盖组件 CSS 类名 | class / style / slot 组合 | `ui` prop 精确到 slot,三层主题合并 |
<span>// 表头、边框、行高、排序图标整套跟着换,不用追加任何 CSS import</span>
app.<span>use</span>(<span>createVTableGuild</span>({ <span>themePreset</span>: <span>'element-plus'</span> }))
几个特点:
- API 对齐 ant-design-vue Table:
columns、change(filters, sorter, extra)、受控 / 非受控排序,迁移成本低 - 行 + 列双向虚拟化:10 万行、200 列都只渲染可视区域
- 三层主题系统:默认主题 → 全局配置 → 实例
uiprop,基于 tailwind-variants,但使用方不需要装 Tailwind - 两套视觉预设:antdv / element-plus,一行切换
- 固定列、列宽拖拽、树形数据、行选择、展开行等常用能力齐全
- 自带 CSS,不依赖 ant-design-vue / element-plus 运行时,MIT 协议,完整 TS 类型
它不做什么
提 PR 时我特意写明了边界,避免和清单里已有的 vxe-table 重叠:
- 没有内置分页
- 没有完整编辑引擎、Excel 导出
- 排序头和筛选触发器暂不支持键盘操作(正在补)
需要全功能企业级表格,vxe-table 仍然是更好的选择;vtable-guild 想做的是「已经在用 antdv / element-plus,只是表格不够用」这个场景下的顺手替换。
写在最后
从第一行代码到被 awesome-vue 收录,这个项目一直是业余时间一点点磨出来的。感谢 awesome-vue 维护者的审核,也感谢每一个试用、提 issue、在 Discussions 里反馈的朋友。
如果你刚好被表格性能或样式定制折磨过,欢迎来试试:
- 📖 文档:parade0393.github.io/vtable-guil…
- 🎮 在线体验(免安装,可分享复现链接):parade0393.github.io/vtable-guil…
- ⭐ GitHub:github.com/parade0393/…
- 📦 安装:
pnpm add @vtable-guild/vtable-guild
觉得有用的话,点个 Star 就是对我最大的鼓励
对已用 antdv / element-plus、又被表格性能与样式定制折磨的团队,这是迁移成本很低的顺手替换方案;被 awesome-vue 收录,也说明其社区可信度初步得到认可。