虚拟滚动解决前端大规模数据渲染问题

场景：需要全量展示列表数据，但数据量极大，会导致页面超级卡顿。通常选择虚拟滚动而不用分页的原因是为了方便某些操作（比如全选）。

解决方案：根据组件的可视范围，只渲染页面可见部分所需要的dom元素，而不是全量渲染。

具体操作步骤：

1、通过接口，拿到列表的全量数据this.dataList。（数据量大该过程可能会较慢，但我们前端目前只解决大规模渲染的卡顿问题，接口慢先不做考虑）

2、通过组件视口的高度和列表项视口的高度，决定每次渲染的数据条数。

computed: {
        // 这个是截取表格中的部分数据，放到了 table 组件中来显示
        sliceTable() {
            return this.dataList.slice(
                this.startIndex, ((this.dataList.length - this.startIndex) > 9) ? (this.startIndex + 9) : this.dataList.length);
        }
    },

以上代码是每次渲染9条，并考虑到了边界情况。

3、设置样式，出现滚动条模拟。

计算列表（.el-table__body）中所有数据应占得高度height,创建一个div并设置高度为height用于撑开容器（.el-table__body-wrapper），出现滚动条，暂且称这个div为‘假盒子’（this.vEle）。

注意：列表（.el-table__body）元素要设置绝对定位，以使得列表悬浮在‘假盒子’上方。

// 设置成绝对定位，这个元素需要我们去控制滚动
                this.$refs.tableRef.$el.querySelector(".el-table__body").style.position = "absolute";
                // 计算表格所有数据所占内容的高度
                this.vEle.style.height = this.dataList.length * 44 + "px";
                // 把这个节点加到表格中去，用它来撑开表格的高度
                this.$refs.tableRef.$el.querySelector(".el-table__body-wrapper").style.overflowY = 'auto'
                this.$refs.tableRef.$el.querySelector(".el-table__body-wrapper").appendChild(this.vEle);

容器的overflow-y属性设置为auto;

4、给容器（.el-table__body-wrapper）添加滚动事件，更新this.startIndex，从而更新需要渲染的列表数据this.sliceTable。注意：添加滚动事件会使列表（.el-table__body）和‘假盒子’（this.vEle）一起滚动，而我们要保持列表不动，更新渲染数据，造成列表滚动的假象，就要逆向移动列表（.el-table__body）。

let bodyWrapperEle = this.$refs.tableRef.$el.querySelector(".el-table__body-wrapper");
            // 滚动的高度
            let scrollTop = bodyWrapperEle.scrollTop;
            // 下一次开始的索引
            this.startIndex = Math.floor(scrollTop / 44);
            // 滚动操作
            bodyWrapperEle.querySelector(".el-table__body").style.transform = `translateY(${this.startIndex * 44}px)`;