赞
踩
vxe-table vue 中支持虚拟滚动组件:虚拟列表、虚拟树、横向与纵向虚拟滚动的列表与表格组件
目前主流的数据驱动框架 react、vue …等虽然上手门槛较低,但是其性能就比原生的 js 差多了(易用性与性能的取舍吧);
例如 vue 中,由于数据双向的原因,需要对数据进行全量双向监听(vue3基于Proxy,性能好很多),从而使渲染性能大幅下降,如果数据量稍微大一点,页面基本上是直接卡死,那么如何解决呢?虚拟组件由此诞生,只渲染当前可视区的内容,其余的收起,当滚动到指定位置时才渲染对应的节点,即时 vue 的双向绑定会损耗性能,由于 dom 节点的大幅减少,也不会对性能造成影响,从而流畅加载。
import VXETable from 'vxe-table' VXETable.setup({ table: { scrollX: { gt: 60, enabled: false // 全局启用 }, scrollY: { gt: 100, enabled: false // 全局启用 } }, list: { scrollY: { gt: 100, enabled: false // 全局启用 } } })
scroll-x 用于控制横向虚拟滚动,gt 当大于指定条数时自动启用,默认 60,如果 enabled=false 或者 gt=-1 则关闭虚拟滚动
scroll-y 用于控制纵向虚拟滚动,gt 当大于指定条数时自动启用,默认 100,如果 enabled=false 或者 gt=-1 则关闭虚拟滚动
<vxe-table :scroll-x="{enabled: false}" :scroll-y="{enabled: false}">
...
</vxe-table>
可以将项目中任意的列表渲染成虚拟滚动,从而支持大数据量加载,例如实现下拉框虚拟列表、海量数据列表…等等,对性能大幅提升,滚动非常流畅(理论上最大可以支持 60w 行)
表格开启虚拟滚动,对于一次性加载 20w 条数据不是梦(理论上最大可以支持 30w 行)
对于某些特殊的场景,比如产品经理说要把一个表格的列非常多的表格全部加载出来,比如 1w 列头、5w 条数据,对于这种需求如果就需要随时准备砖头(谁提拍谁),就可以试试同时开启横向和纵向虚拟滚动,只会渲染可视区的 tr、td 节点,也能轻松应对(理论上最大可以支持 30w 行)
除了列表之外,那么最复杂的就是树结构了,当一颗树节点非常多的时候,如果都渲染出来,将会导致dom节点非常多导致卡顿。别急,好在虚拟树也是支持的,以下渲染 5w 条树节点,依然流畅(理论上最大可以支持 30w 行)
通过设置 tree-config = {transform: true, rowField: 'id', parentField: 'parentId'}
来启用虚拟树
来
除了以上树的虚拟滚动,如果还要更变态一点,比如要支持 5k 列 5w 行树节点,也是可以支持的,但是由于目前的数据结构已经到非常大了,涉及 js 运行效率、数据双向的损耗…等,(理论上最大可以支持 30w 行)
到这里就结束了,完了!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。