专业的表格控件 SpreadJS 、ad-grid、vxe-table 对比评测,仅对个人实际使用中的开发体验分享、仅供参考
做过很多大型项目,ERP、企业内部管理系统,一个系统好不好用基本就是看表格做得好不好了。一般业务的列表页面、增删改查页面、表单页面等。
总结实现 Excel 在线协同功能就选 SpreadJS、handsontable、luckysheet; 一般 ERP 、管理系统可以选 ag-grid 或 vxe-table 都可以。如果是 react 项目或者对超大列表的性能有非常强的要求就选 ag-grid; 如果是 vue 项目就选主流的 vxe-table,无缝兼容全部 vue 生态组件,配合渲染器自定义业务渲染,扩展性非常无敌。
SpreadJSad-gridvxe-tablehandsontableluckysheet付费/授权企业版(收费)社区版(免费),企业版(收费)MIT开源(免费),企业版(收费)个人免费,商用收费MIT开源Excel 功能实现 Excel 网页版多功能表格,兼具 Excel 功能多功能表格,兼具 Excel 功能类似 Excel 表格实现 Excel 网页版单元格选择与复制粘贴支持支持支持支持支持全功能按键导航操作支持支持支持支持支持自定义列部分支持支持支持不支持不支持列宽拖拽调整支持支持支持支持支持行高拖拽调整支持不支持支持支持支持列拖拽排序不支持支持支持支持不支持行拖拽排序不支持支持支持支持不支持单选行、多选行不支持支持支持不支持不支持冻结列支持支持支持支持支持筛选支持支持支持支持支持排序支持支持支持支持支持展开行不支持支持支持不支持不支持树表格部分支持支持支持支持部分支持查找与替换支持不支持支持不支持支持右键菜单支持支持支持支持支持表尾合计不支持支持支持支持不支持编辑表格支持支持支持支持支持编辑校验不支持不支持支持不支持不支持增删改编辑状态不支持不支持支持不支持不支持无限滚动加载不支持不支持支持不支持不支持编辑控件扩展原生js,不依赖框架原生js,不依赖框架兼容 vue 所有生态组件,上手简单原生js,不依赖框架原生js,不依赖框架集成图表支持支持支持简单图表、集成 echarts 、第三方图表库不支持支持excel导入导出、打印支持支持支持不支持支持渲染模式canvashtmlhtmlhtmlcanvas超大量数据列表百万行百万行百万行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 :全能表格解决方案
https://gitee.com/x-extends/vxe-table https://vxetable.cn
如果项目使用 vue,那么 vxe-table 基本是首选,不管是表格和表单,在 vue 生态组件中基本没有功能与之一样强大、灵活可扩展的,官方文档也是最完善最全的。
对于渲染量不超过 30 万行的表格,最强表格的首选,没有之一;对于需要再前端渲染百万行的表格,那么就应该选择其他的表格。
行拖拽
列拖拽
上单元格中上传附件与预览
打印功能
数据校验
数据分组
透视表聚合函数
复制粘贴 多区域复制粘贴
树结构
表尾合计 Excel 模式
自定义筛选
查找与替换
单元格简单图表,高性能图表,渲染万级数据单元格图表都是毫秒级
集成图表功能