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

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

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

注：（开启虚拟滚动的前提，每一行的高度必须固定）

虚拟列表

可以将项目中任意的列表渲染成虚拟滚动，从而支持大数据量加载，例如实现下拉框虚拟列表、海量数据列表…等等，对性能的提升飞一般高效

纵向虚拟表格

表格开启虚拟滚动，对于一次性加载 10w 条数据不是梦

横向与纵向虚拟表格

对于某些特殊的场景，比如产品经理说要把一个表格的列非常多的表格全部加载出来，比如 1w 列头、5w 条数据，对于这种需求如果砍不死产品经理的话，就可以试试同时开启横向和纵向虚拟滚动，只会渲染可视区的 tr、td 节点，也能轻松应对

纵向虚拟树表格

除了列表之外，那么最复杂的就是树结构了，当一颗树节点非常多的时候，如果都渲染出来，由于是树结构，那么递归的损耗比列表大太多了。别急，好在虚拟树也是支持的，以下渲染 5w 条树节点，依然相当流畅，不过树由于其结构本身就非常复杂，所以一般如果不超过 10w 条还是很流畅的

树的虚拟滚动需要借助一个插件 vxe-table-plugin-virtual-tree

横向与纵向虚拟树表格

又到了砍死产品经理的时候了，TM 谁再提这种需求就砍谁。除了以上树的虚拟滚动，如果还要更变态一点，比如要支持 5k 列 3w 行树节点，别急，准备好砖头，还是可以支持的，但是由于目前的数据结构已经到了极限了（涉及 js 运行效率、数据双向的损耗…等），所以如果数据量太大的话可能就没那么流畅了，数据量不超过 5w 节点话还是没问题的

到这里就结束了哈，不贴代码、不发地址，一切随缘，有需要的人自然可以找到，找不到的说明不需要！