背景：项目中使用的是element-ui组件。 项目中有很多列表、下拉列表、下拉树，包含大量数据（10000级）。
问题：数据完全加载时，页面明显卡顿，延迟约3-10秒，往往会导致浏览器显存爆裂，页面直接崩溃。
思路：项目中主列表中，长期使用umy-table控件elementui 虚拟列表，支持虚拟滚动加载数据，性能有所提升。 由于umy-table仅支持表格控件elementui 虚拟列表，因此我们希望将这种思想用于select和项目封装的select-tree控件。
原则：
A。 只加载层中的数据。
b. 知道了每个item的高度并知道了所有item的条目数，我们就可以知道应该显示的总高度。
C。 通过滚动波监听滚动位置，估计当前应该显示的数据，并将数据插入到显示列表中。
大致实现如下：
列表
固定每个item的高度，使用visibaleData作为渲染el-tree的数据。 visibleData在初始化数据时截取了原始treeData的数据。 每一项的高度减去el-tree容器的高度，即可得到该范围内应显示的记录数。 然后将index参数对应的数据赋予visibleData。 。
稍后滚动时，更新visibleData，将每个item的高度乘以scrollTop，得到滚动了多少个item。 使用这个索引作为本次首先加载的数据，然后添加需要显示的项目。 显示滚动区域对应的数据。 使用transform:translateY(offsetpx)设置scrollTop偏转以保持渲染数据在可见范围内。
在树结构的内层添加一个包装器，将位置设置为相对，并指定高度。
在包装器中添加一个位置为absolute的div，用于在给定的最大高度（所有数据项的数量*每项的高度）处打开树容器，并且会出现滚动条。
el-tree 设置为绝对定位。
树
上面的实现主要用于长列表，对于树结构需要做如下修改。
扁平化树形结构数据
参考文章：
