vex-table的技术预研
预研背景VUE开发在PC端一般使用element-ui ,要不然就是iview。而在一般管理端开发中table组件可以说是重中之重,非常频繁的使用到。但是如果碰到复杂的表格、以及数据量多的时候,此时组件的性能就尤其的重要。预研目标• 引入更强大的table组件,解决复杂的表格业务,提高开发效率以及渲染性能。功能分析一般框架基础功能,例如element-ui的el-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完全可以引入团队技术栈,在进行特殊表格开发时节约开发时间和提高性能。
更多推荐
所有评论(0)