花了2个月时间研究了市面上的4款开源表格组件,崩溃了,决定自己写一款

hi, 大家好, 我是徐小夕.

之前在研发AI办公软件的过程中,有一个核心功能,需要写一个多维表格模块,类似飞书文档的多维表格,但是找了市面上很多开源的方案,都没有很好的满足我对产品的极致要求。

浪费了一个月时间,最后决定自己开发一个,又花了一个月时间,目前终于有了一个基本雏形:

后续我会继续分享这款多维表格解决方案,包括功能设计和技术方案,感兴趣可以关注一下。

接下来和大家分享一下目前我调研的几个开源成熟的方案,并总结一下为什么我放弃了这些方案。复杂表格的4种成熟开源方案踩了很多坑,最后过滤了几款还算成熟的表格方案,大家也可以参考一下。

  • Vue-Good-Table
  • 特点 vue-good-table是一款全面、易用且高度可定制化的表格组件,提供了排序、分页、过滤、自定义列模板等高级特性,能轻松处理复杂的表格需求。它深度集成 Vue.js,利用响应式数据绑定和组件化优势,实现表格数据的动态更新,并且具有良好的响应式设计,能适应不同屏幕尺寸。

    • 适用场景可广泛用于需要展示大量结构化数据的应用场景,如数据管理界面、后台数据报表等。

    • 使用它也很简单,我们安装完这个模块之后,只需要引入进项目即可:

      python 复制代码
      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地址:github.com/xaksis/vue-...

  • vxe - table

  • 特点vxe-table功能丰富强大,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染等众多功能,几乎能满足各种复杂业务场景下的表格需求。它提供了非常灵活的配置项和扩展接口,并且有良好的社区支持和文档说明。

  • 版本支持目前主要维护两个版本,3.x 主要面向 Vue 2.6+,4.x 主要面向 Vue 3.x,能很好地适配不同的 Vue 项目版本。

  • 它提供了开源版和付费版,虽然展现力更强大,但是还是无法满足我对"多维表格"的要求。目前它在github上有8k star,还是有一定用户群体的。

  • Antv S2

  • 特点Antv S2是蚂蚁金服旗下针对多维交叉分析领域的数据可视化解决方案,采用 Canvas 来实现,在性能方面表现出色,渲染大量数据时也能保持流畅。它数据驱动视图,提供了底层核心库、基础组件库、业务场景库,具备很强的自由扩展能力,方便开发者根据自身场景进行定制开发。

  • 适用场景特别适合偏向于数据分析的项目,能帮助用户快速对多维数据进行分析和展示。

  • 虽然Antv S2提供了丰富的图表案例,并支持丰富的展现,但是对于我的"多维表格"需求来说,从UI灵活性和渲染体验上,还是无法满足我的期待,当然如果大家的需求场景不复杂,无需额外定制,antv s2 是一个不错的选择。毕竟是大厂项目。

  • Vue - Vtable

  • 特点vtable 是字节跳动开源可视化解决方案 VisActor 中的组件,基于可视化渲染引擎 VRender,具有高性能和强大的多维分析能力,以及灵活强大的图形能力。Vue - Vtable 将其功能与 Vue.js 的灵活性和易用性完美结合,方便 Vue 开发者快速构建出高性能、交互性强的数据表格。

  • 适用场景适用于对表格性能和多维分析能力有较高要求的 Vue 项目,如大型数据展示平台、数据分析仪表盘等。

  • vtable是我觉得最能满足我需求的,但是仍然有部分定制的UI和功能无法满足,所以也忍痛放弃了。大家感兴趣可以参考一下这个库。

我对多维表格有更复杂的要求,需要基于项目任务表格,生成多维度的分析图表,并支持多种任务视图展示,目前我的方案实现效果如下:

不仅需要支持任务项的编辑,拖拽排序,还需要支持看板视图,如下:

同时还需要动态能添加任务和指派对应的人员:

后续会持续分享我对多维表格的设计方案和技术实现,并提供完整的项目演示供大家体验。

最后

我们最近研发的 flowmix/docx多模态文档引擎,目前也在持续更新中,欢迎体验参考:

文档地址:flowmix.turntip.cn

相关推荐
志尊宝27 分钟前
AI原生前端开发(039):AI辅助的Nuxt 4全栈开发
前端·vue.js·ai-native
FRing031 小时前
JavaScript入门到精通三十二(深拷贝、浅拷贝、递归函数)
开发语言·前端·javascript
excel2 小时前
双 Token 与前端使用 Crypto 公私钥鉴权换 Token,哪种方案更好?
前端·后端
外收内放2 小时前
Python基础语法练习题(73)
java·前端·python
鸿蒙开发2 小时前
Three.js 首帧卡顿排查:compileAsync 之后,为什么还会停一下?
react.js·three.js
风骏时光牛马2 小时前
面向复杂场景的大模型应用落地与能力优化实践
前端
小小善后师2 小时前
我做了个病历归档小程序,被 AI 识别的"最后一公里"狠狠上了一课
前端
H_Lisa3 小时前
我用 Express 写了个 MCP,Claude 直接调用我的 API 了
前端
IT_陈寒3 小时前
React的useEffect依赖数组把我坑惨了
前端·人工智能·后端
兰亭妙微UI设计公司4 小时前
兰亭妙微ui设计公司分享:B端组件命名如何支持团队协作
前端·javascript·vue.js