vxe-table vue 中支持虚拟滚动组件：虚拟列表、虚拟树、横向与纵向虚拟滚动的列表与表格组件

vxe-table vue 中支持虚拟滚动组件：虚拟列表、虚拟树、横向与纵向虚拟滚动的列表与表格组件

目前主流的数据驱动框架 react、vue …等虽然上手门槛较低，但是其性能就比原生的 js 差多了（易用性与性能的取舍吧）；
例如 vue 中，由于数据双向的原因，需要对数据进行全量双向监听（vue3基于Proxy，性能好很多），从而使渲染性能大幅下降，如果数据量稍微大一点，页面基本上是直接卡死，那么如何解决呢？虚拟组件由此诞生，只渲染当前可视区的内容，其余的收起，当滚动到指定位置时才渲染对应的节点，即时 vue 的双向绑定会损耗性能，由于 dom 节点的大幅减少，也不会对性能造成影响，从而流畅加载。

相关说明

缺点

• 启用虚拟滚动后 show-overflow，show-header-overflow，show-footer-overflow 参数将根据渲染规则各自触发生效，无法取消；所有单元格比较同等高度，不能用于自适应高度；
• 不支持展开行以及任何更改单元格高度的方式
• 横向虚拟滚动不支持分组表头
• 当渲染复杂固定列时，同步滚动会有延迟，具体由渲染的复杂度决定

全局参数

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 行）

到这里就结束了，完了！