el-table 实现虚拟滚动

在Element UI库中的`el-table`组件中，虚拟滚动是一种优化技术，用于处理大量数据展示的问题。当数据量非常大以至于无法一次性加载到页面上时，虚拟滚动会只渲染当前可见区域的数据，而将其他部分暂存起来，当用户滚动时动态加载更多数据。这样可以显著提高性能，减少DOM节点数量。

实现虚拟滚动的关键在于`el-table`的`virtual-scroll`属性，它接受一个函数作为值，这个函数需要返回一个Promise，该Promise解析后得到的数据片段就是表格将在下一次滚动时渲染的内容。此外，还有一些相关的配置，如`row-key`用于唯一标识每一行数据，`show-summary`用于显示数据总数等。

以下是基本的设置示例：

<el-table :data="largeData" :virtual-scroll="loadMore">
  <!-- 表格列定义 -->
</el-table>

<script>
export default {
  data() {
    return {
      largeData: [], // 非常大的数据数组
      loadMore({高度, offset}) { 
        const start = offset * this.tableHeight; // 计算开始索引
        const end = Math.min(start + this.tableHeight, this.largeData.length); // 计算结束索引
        return new Promise((resolve) => {
          // 模拟异步加载数据
          setTimeout(() => {
            resolve(this.largeData.slice(start, end));
          }, 500);
        });
      },
      tableHeight: 20, // 每次滚动可视区的高度
    };
  }
};
</script>