vxe-table 从 2018 年开源以来,发布稳定版本从 v1 ~ v4 版本,作为专业的表格组件,不管是功能还是性能已经非常强大了。v4.9+ / v3.11+ 主要是解决动态行高与虚拟滚动与动态行高的问题、复杂度高的渲染出现渲染期空白的问题解决、树形结构单元格选取功能,以及大幅提升虚拟渲染性能,操作更加流畅。
由于老版本的虚拟滚动存在很多局限性,比如不支持动态行高、渲染复杂度高了运算跟不上就会容易出现滚动期的白屏。
查看官网:vxetable.cn
查看 Gitee:https://gitee.com/x-extends/vxe-table
vxe-table 4.9+ 对虚拟渲染进行重构,使其可以支持虚拟滚动的同时还能支持动态行高。不仅如此,对于冻结列一级自定义复杂渲染的场景的渲染性能更是大幅提升。以下来针对常用的场景做个测试,特殊场景需针对特殊优化处理,这里不做演示。
安装
需要注意的时,v4.7 以下版本升级,需要调整一下全局的配置及安装引用方式。4.7+可以直接更新。具体以官网文档为准。
npm install vxe-pc-ui@4.3.16 vxe-table@4.9.16
// ...
import VxeUI from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...
createApp(App).use(VxeUI).use(VxeUITable).mount('#app')
// ...
优化自适应列宽与列宽拖拽调整效果
支持更加灵活的拖拽列宽限制方法以及优化效果
支持行与列拖拽效果
优化流畅的拖拽效果
更好的支持列拖拽
同时支持行的拖拽排序
优化虚拟滚动
使用 100列,5000-50000行数据,1万条的渲染更是基本在50毫秒内,相比老版本快了几倍,从滚动动画到拖动把柄快速拉动,都是很流畅的。
支持无限滚动场景
无限滚动的实现可以由 scroll 事件来处理数据,比如滚动到顶部或底部时,调用接口获取下一页的数据,从而实现不分页加载全量数据。
支持动态行高
动态行高也是一样,区别就是所支持的最大数据量少很多了,好处保持流畅的情况下对于5万以内的数据量是完全没问题。
优化高性能单元格图表
在单元格渲染轻量级的简化图表,由于是纯 css 图标,所以即使是十万级数据也是秒渲染的
优化树结构单元格选择
企业版支持更强大的树形单元格选取与复制粘贴。渲染性能也是大幅提升、支持更多虚拟表格的操作,操作树表更加流畅
优化可视化图表
企业版更好的支持图表渲染