一、前言
因为需要做一些后台管理系统，用于敏捷开发，特此将市面上较为流行的代码缝合，取长补短；特此总结；具体请看下方源码
二、优缺点对比
- elementPlus的table组件满足增删改查，普通业务需求；但不是虚拟表格，数据过多，容易造成卡顿；但是操作性，交互性强；对于一些小项目够用
- ag-grid-vue3的表格，在不更改elementPlus的table组件原组件设计方式基础上，采用透传方式嵌入ag-grid-vue3的表格组件，达到基础表格只需要替换标签就能够相互转换的效果；ag-grid-vue3这里就不做过多讲解；对于大数据量的项目友好，上手难度比较高
三、效果
1、elementPlus的table，这里是采用《Vue3.2 + Element-Plus 二次封装 el-table（Pro版🚀🚀）》的基础上进行魔改；在此基础上兼容ag-grid-vue3；
2、兼容vben-admin的主题更改，以及动态高度，底部合计行
3、导入/导出/字段设置组件封装，以及表格相关功能权限设置
4、elementPlus的table树形与ag-grid-vue3的树形对比
上图可以看出，当树型结构数据超出1k条时，elementPlus出现明显卡顿
5、自定义搜索项，响应式
6、ag-grid-vue3，列搜索/列拖拽/列排序/自动合计行计算/导出csv，xlsx/自定义单元格样式/头部样式/行样式等
【注意】我所使用的ag-grid-vue3是企业版本的收费产品，这里是帮助用户您去了解该表格是否适合您的业务需求,，并不能作为用户您实际业务的指导；当然我们可以采用vben-admin中vxe-table,也是一款表现很不错的虚拟表格，这里就没有去做封装
ag-grid-vue3优点：
- 正如它官网描述的是，世界上最好的表格；高额收费也是有它的道理的；一直在持续更新，每年都有新功能
- 上方表格的操作只是ag-grid普通功能之一，还有更多更复杂的功能，详细请看官网
ag-grid-vue3缺点：
- 企业版收费，社区版免费，但是社区版缺少很多模块化功能；很多的功能/api都是收费的，社区版无法使用；如果你想了解社区版本的，可以去看看我往期的《ag-grid-vue表格--系列2》，
- 对于复杂性很高的业务该表格适合，但是代码上手难度大
- ag-grid的新特性，各版本之间各有差异，在ag-grid版本升级后，对原有代码调整就非常难受
四、感谢开源
- vben-admin文档
- vben-admin（elementPlus版本）预览地址
- RuoYi-Vue3-FastAPI
- ag-grid-vue3【有社区版(免费)和企业版(收费)】
- elementPlus
- Vue3.2 + Element-Plus 二次封装 el-table（Pro版🚀🚀）
五、源码地址
github: github.com/ArcherNull/…
六、总结
如果对您有帮助，请一键三连，完结撒花。。。
