分享个人在项目中使用过最强的企业级表格、table 组件哪家强、顶级表格控件推荐 vxe-table
专业的表格控件 SpreadJS 、ad-grid、vxe-table 对比评测,仅对个人实际使用中的开发体验分享、仅供参考
做过很多大型项目,ERP、企业内部管理系统,一个系统好不好用基本就是看表格做得好不好了。一般业务的列表页面、增删改查页面、表单页面等。
总结实现 Excel 在线协同功能就选 SpreadJS、handsontable、luckysheet; 一般 ERP 、管理系统可以选 ag-grid 或 vxe-table 都可以。如果是 react 项目或者对超大列表的性能有非常强的要求就选 ag-grid; 如果是 vue 项目就选主流的 vxe-table 无缝兼容 vue 生态,配合渲染器自定义业务渲染,扩展性非常无敌。
| SpreadJS | ad-grid | vxe-table | handsontable | luckysheet | |
|---|---|---|---|---|---|
| 付费/授权 | 企业版(收费) | 社区版(免费),企业版(收费) | MIT开源(免费),企业版(收费) | 个人免费,商用收费 | MIT开源 |
| Excel 功能 | 实现 Excel 网页版 | 多功能表格,兼具 Excel 功能 | 多功能表格,兼具 Excel 功能 | 类似 Excel 表格 | 实现 Excel 网页版 |
| 单元格选择与复制粘贴 | 支持 | 支持 | 支持 | 支持 | 支持 |
| 全功能按键导航操作 | 支持 | 支持 | 支持 | 支持 | 支持 |
| 自定义列 | 部分支持 | 支持 | 支持 | 不支持 | 不支持 |
| 列宽拖拽调整 | 支持 | 支持 | 支持 | 支持 | 支持 |
| 行高拖拽调整 | 支持 | 不支持 | 支持 | 支持 | 支持 |
| 列拖拽排序 | 不支持 | 支持 | 支持 | 支持 | 不支持 |
| 行拖拽排序 | 不支持 | 支持 | 支持 | 支持 | 不支持 |
| 单选行、多选行 | 不支持 | 支持 | 支持 | 不支持 | 不支持 |
| 冻结列 | 支持 | 支持 | 支持 | 支持 | 支持 |
| 筛选 | 支持 | 支持 | 支持 | 支持 | 支持 |
| 排序 | 支持 | 支持 | 支持 | 支持 | 支持 |
| 展开行 | 不支持 | 支持 | 支持 | 不支持 | 不支持 |
| 树表格 | 部分支持 | 支持 | 支持 | 支持 | 部分支持 |
| 查找与替换 | 支持 | 不支持 | 支持 | 不支持 | 支持 |
| 右键菜单 | 支持 | 支持 | 支持 | 支持 | 支持 |
| 表尾合计 | 不支持 | 支持 | 支持 | 支持 | 不支持 |
| 编辑表格 | 支持 | 支持 | 支持 | 支持 | 支持 |
| 编辑校验 | 不支持 | 不支持 | 支持 | 不支持 | 不支持 |
| 增删改编辑状态 | 不支持 | 不支持 | 支持 | 不支持 | 不支持 |
| 无限滚动加载 | 不支持 | 不支持 | 支持 | 不支持 | 不支持 |
| 编辑控件扩展 | 原生js,不依赖框架 | 原生js,不依赖框架 | 兼容 vue 所有生态组件,上手简单 | 原生js,不依赖框架 | 原生js,不依赖框架 |
| 集成图表 | 支持 | 支持 | 支持简单图表、集成 echarts 、第三方图表库 | 不支持 | 支持 |
| excel导入导出、打印 | 支持 | 支持 | 支持 | 不支持 | 支持 |
| 渲染模式 | canvas | html | html | html | canvas |
| 超大量数据列表 | 百万行 | 百万行 | 百万行 | 10w行 | 百万行 |
| 渲染性能/流畅度 | 强 | 强 | 中等 | 一般 | 一般 |
| 使用难度 | 原生 js,上手相对较难 | 原生 js,上手相对较难 | 纯 vue,上手简单 | 原生 js,上手相对较难 | 原生 js,上手相对较难 |
| 功能扩展难度 | 相对较难,原生js,不依赖框架 | 相对较难,原生js,不依赖框架 | 上手简单,纯 vue 表格,兼容 vue 所有生态组件 | 相对较难,原生js,不依赖框架 | 相对较难,原生js,不依赖框架 |
SpreadJS :Excel 网页版
https://demo.grapecity.com.cn/SpreadJS/WebDesigner/index.htmlb
如果项目是需要实现 Excel 功能,基本就是 Web版 Excel,适用于实现在线协同之类的项目,那么是很合适的,如果只是普通表格,那么就不合适了。

ag-grid :功能非常强大表格
github
https://www.ag-grid.com
如果项目需要实现类似 Excel 和 普通功能都兼具功能,如果项目是用多框架或原生开发,那么还是比较合适的。如果是 vue 生态,那么集成难度会大一些,相对不容易扩展。

vxe-table :全功能表格解决方案
如果项目使用 vue,那么 vxe-table 基本是首选,不管是表格和表单,在 vue 生态组件中基本没有功能与之一样强大、灵活可扩展的,官方文档也是最完善最全的。











浙公网安备 33010602011771号