vxe-table 从 2018 年开源以来,发布稳定版本从 v1 ~ v4 版本,作为专业的表格组件,与一般组件库的普通 Table 没有可比性,不管是功能还是性能已经很强大很完善了。v4.9+ / v3.11+ 主要是解决动态行高与虚拟滚动与动态行高的问题、复杂度高的渲染出现渲染期空白的问题解决。
由于老版本的虚拟滚动存在很多局限性,比如不支持动态行高、渲染复杂度高了运算跟不上就会容易出现滚动期的白屏。
vxe-table 4.9+ 对虚拟渲染进行重构,使其可以支持虚拟滚动的同时还能支持动态行高。不仅如此,对于冻结列一级自定义复杂渲染的场景的渲染性能更是大幅提升。以下来针对常用的场景做个测试,特殊场景需针对特殊优化处理,这里不做演示。
虚拟滚动
使用 100列,5000-50000行数据,1万条的渲染更是基本在50毫秒内,相比老版本快了几倍,从滚动动画到拖动把柄快速拉动,都是很流畅的。
动态行高
动态行高也是一样,区别就是所支持的最大数据量少很多了,好处保持流畅的情况下对于5万以内的数据量是完全没问题。
需要注意动态行高与横向虚拟滚动同时使用时,由于其他被卷去的单元格是不渲染,当滑动到可视区就会被渲染,这时可能由于后面的单元格比前面的单元格高一些,就会有一种单元格突然变高的特性
无限滚动场景
无限滚动的实现可以由 scroll 事件来处理数据,比如滚动到顶部或底部时,调用接口获取下一页的数据,从而实现不分页加载全量数据。
高性能简化图表
在单元格渲染轻量级的简化图表,由于是纯 css 图标,所以即使是十万级数据也是秒渲染的
树结构
企业版本的更新:优化树形渲染,支持树形的单元格选取与复制粘贴。渲染性能也是大幅提升
集成图表
企业版本的更新:支持树形表格的单元格选取、单元格选取与动态行高、支持更多虚拟表格的操作
性能优化
- 一般列没大于16列,没必要开启横向虚拟滚动;
- 横向虚拟滚动启用后尽可能使可视区的列不大于10列;
- 纵向虚拟滚动启用后尽可能使可视区的行不大于20行;
- 不管是横向还是纵向虚拟渲染,包括各种单元格自定义渲染,渲染量越大就越不流畅,尽可能减少同步运算的方法;
- 如果存在分页,建议是大于100行再启用纵向虚拟滚动;
- 如果是确定数据量较大的场景,建议一直开启虚拟滚动