vex-table的技术预研

预研背景

VUE开发在PC端一般使用element-ui ,要不然就是iview。而在一般管理端开发中table组件可以说是重中之重，非常频繁的使用到。但是如果碰到复杂的表格、以及数据量多的时候，此时组件的性能就尤其的重要。

预研目标

• 引入更强大的table组件，解决复杂的表格业务，提高开发效率以及渲染性能。
功能分析

一般框架基础功能，例如element-ui的el-table

• 基础表格
• 带斑马纹表格
• 边框表格
• 状态表格
• 固定表头/列表格
• 多级表头
• 自定义模板内容
• 展开行功能表格
• 属性数据与懒加载表格

官方体验地址：https://element.eleme.cn/#/zh-CN/component/table

vxe-table 在以上新增部分功能如下：均可以自动配置

• 单元格工具提示
• 单元格溢出省略
• 空数据配置
• 工具栏
• 键盘导航
• 数据校验
• 数据代理
• 虚拟滚动（仅指定范围内的可视区数据）

此前若要实现以上列表的业务功能一般均为开发者自行编码，引入vxe-table可以直接走相关配置即可。

官方体验地址：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/base/basic

el-table、vxe-table性能比较

通过Vue performance插件可以看到每个组件的时间分配

例如：在掌上吉祥2.0的管理后台，渲染1000条数据，分别使用el-table, vxe-table ，在同一页面中展示分别比较渲染效果与时间。

运行结果：

• el-table 与 vxe-table 在渲染10条数据上差异较小，1000条数据渲染时间差异较大。

结果分析：

vxe-table 利用虚拟滚动，仅渲染用户可视的部分，其他部分不渲染，这对于表格的性能有比较大的提升。

相关运行图片：

el-table，vxe-table 100条与1000条数据耗时，运行图片如下：

成本 - 低

接入方式
与element-ui 框架接入方式一致，参考：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/use

基于vue的组件
与团队使用框架一致

vxe-table 适用场景

• 复杂表格
• 列表数据量大
• 表格类数据校验等

结论：
vxe-table完全可以引入团队技术栈，在进行特殊表格开发时节约开发时间和提高性能。