花了2个月时间研究了市面上的4款开源表格组件，崩溃了，决定本身写一款
hi, 各人好, 我是徐小夕.之前在研发AI办公软件的过程中，有一个焦点功能，需要写一个多维表格模块，雷同飞书文档的多维表格，但是找了市面上许多开源的方案，都没有很好的满足我对产品的极致要求。
浪费了一个月时间，最后决定本身开发一个，又花了一个月时间，目前终于有了一个基本雏形：
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9pbWdfY29udmVydC9hNjA2MmQ3YjFkNjJlMDkwYWU5MWQwOWIyMjM5MzNmMC5naWY=
后续我会在【趣谈前端】中分享这款多维表格解决方案，包罗功能设计和技能方案，感爱好可以关注一下。
接下来和各人分享一下目前我调研的几个开源成熟的方案，并总结一下为什么我放弃了这些方案。
复杂表格的4种成熟开源方案
踩了许多坑，最后过滤了几款还算成熟的表格方案，各人也可以参考一下。
[*]Vue-Good-Table
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9pbWdfY29udmVydC83NDk4OGNjODQ0OTg3NDAwY2M2NmUzNGRjNjUxM2U3YS5wbmc=
[*]
[*]特点vue-good-table是一款全面、易用且高度可定制化的表格组件，提供了排序、分页、过滤、自定义列模板等高级特性，能轻松处理复杂的表格需求。它深度集成 Vue.js，利用响应式数据绑定和组件化优势，实现表格数据的动态更新，而且具有良好的响应式设计，能适应不同屏幕尺寸。
[*]适用场景可广泛用于需要展示大量结构化数据的应用场景，如数据管理界面、后台数据报表等。
[*]利用它也很简单，我们安装完这个模块之后，只需要引入进项目即可：
import VueGoodTablePlugin from 'vue-good-table';// import the stylesimport 'vue-good-table/dist/vue-good-table.css'Vue.use(VueGoodTablePlugin);它在github上有2.2k star，之以是没有利用它，主要是由于UI渲染能力限制比力大，而且无法实现编辑表格的功能。如果各人感爱好，可以参考一下github地址：https://github.com/xaksis/vue-good-table
[*]vxe - table
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9pbWdfY29udmVydC8yNDY5ZmMzYjE0NGIyMmUwOTk4MjJkNjQ2ZjI4ZjE4My5naWY=
[*]
[*]特点vxe-table功能丰富强盛，支持增删改查、假造滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染等浩繁功能，几乎能满足各种复杂业务场景下的表格需求。它提供了非常灵活的配置项和扩展接口，而且有良好的社区支持和文档分析。
[*]版本支持目前主要维护两个版本，3.x 主要面向 Vue 2.6+，4.x 主要面向 Vue 3.x，能很好地适配不同的 Vue 项目版本。
[*]它提供了开源版和付费版，虽然展现力更强盛，但是还是无法满足我对“多维表格”的要求。目前它在github上有8k star，还是有一定用户群体的。
[*]Antv S2
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9pbWdfY29udmVydC8zNWViZWM0OGQwMDdkOWIxZmY2MDFhZjc0MmFmMDdiYy5naWY=
[*]
[*]特点Antv S2是蚂蚁金服旗下针对多维交织分析领域的数据可视化解决方案，采用 Canvas 来实现，在性能方面表现出色，渲染大量数据时也能保持流通。它数据驱动视图，提供了底层焦点库、底子组件库、业务场景库，具备很强的自由扩展能力，方便开发者根据自身场景举行定制开发。
[*]适用场景特殊恰当偏向于数据分析的项目，能资助用户快速对多维数据举行分析和展示。
[*]虽然Antv S2提供了丰富的图表案例，并支持丰富的展现，但是对于我的“多维表格”需求来说，从UI灵活性和渲染体验上，还是无法满足我的等候，固然如果各人的需求场景不复杂，无需额外定制，antv s2 是一个不错的选择。究竟是大厂项目。
[*]Vue - Vtable
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9pbWdfY29udmVydC9mMDQyMDI5OGYxMmI1YWVlODNhMjk3MDg1OTBhNjQ3Zi5naWY=
[*]
[*]特点vtable 是字节跳动开源可视化解决方案 VisActor 中的组件，基于可视化渲染引擎 VRender，具有高性能和强盛的多维分析能力，以及灵活强盛的图形能力。Vue - Vtable 将其功能与 Vue.js 的灵活性和易用性完美结合，方便 Vue 开发者快速构建出高性能、交互性强的数据表格。
[*]适用场景适用于对表格性能和多维分析能力有较高要求的 Vue 项目，如大型数据展示平台、数据分析仪表盘等。
[*]vtable是我觉得最能满足我需求的，但是仍然有部分定制的UI和功能无法满足，以是也忍痛放弃了。各人感爱好可以参考一下这个库。
我对多维表格有更复杂的要求，需要基于项目任务表格，生成多维度的分析图表，并支持多种任务视图展示，目前我的方案实现结果如下：
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9pbWdfY29udmVydC82MzVmYjFmNGQ4NzQ1Y2ZjM2NjOWE1MGJkOWRkNTk1MS5wbmc=
不仅需要支持任务项的编辑，拖拽排序，还需要支持看板视图，如下：
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9pbWdfY29udmVydC8yMGQzZTEyNzFhMGRkMTVhNjdmMTFjOGZiNjEyZTAxMi5wbmc=
同时还需要动态能添加任务和指派对应的职员：
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9pbWdfY29udmVydC8wYTUzZDFlYmY4NWI0YjZlMWNmMTdlYTFjNmRkMWZkNy5wbmc=
后续会持续分享我对多维表格的设计方案和技能实现，并提供完整的项目演示供各人体验。
同时我建了一个AI + 可视化技能交换群，各人感爱好可以在群里沟通学习：
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9pbWdfY29udmVydC81NjY1YmYwNDJhYWU3ZTFiN2M3Y2JkYmVkMjA1NDUwYy5qcGVn
最后
我们最近研发的 flowmix/docx多模态文档引擎，目前也在持续更新中，欢迎体验参考：
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9pbWdfY29udmVydC9kMzFhYTdmYWQzODFhODI4MDVlYjBkZjcwOWIyNTcyZi5naWY=
https://flowmix.turntip.cn
往期更新:
Flowmix/Docx 多模态文档编辑器: 让文档不止于文档
MindLink，一款功能强盛的AI文档编辑器
flowmix/docx, 支持超大PDF/Docx文件剖析的多模态文档编辑器
市面上大多数文档编辑器的【划线品评】功能，是如何实现的？
多模态文档+头脑导图：引领内容创作新潮流
页:
[1]