vxe-table v4.9+、v3.11+ 重要版本发布,渲染性能大幅提升,大幅降低白屏渲染空白期、支持动态列宽、动态行高

原创
2024/12/05 18:47
阅读数 70

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 图标,所以即使是十万级数据也是秒渲染的

优化树结构单元格选择

企业版支持更强大的树形单元格选取与复制粘贴。渲染性能也是大幅提升、支持更多虚拟表格的操作,操作树表更加流畅

优化可视化图表

企业版更好的支持图表渲染

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部