el-table使用vue-virtual-scroller

`el-table` 是 Element UI 中的一个表格组件，而 `vue-virtual-scroller` 是一个 Vue.js 插件，用于优化大量数据的表格滚动性能，通过虚拟滚动技术只渲染当前可见的部分，提高性能并减少内存消耗。

当需要处理的数据量非常大，常规的滚动会带来性能瓶颈时，可以将 `el-table` 和 `vue-virtual-scroller` 结合使用。具体步骤如下：

1. 安装 `vue-virtual-scroller`: 在项目中安装这个插件，通常是通过 npm 或者 yarn 进行安装。

   npm install vue-virtual-scroller

2. 配置 `el-table` 并应用虚拟滚动：给 `el-table` 组件添加 `v-virtual-scroll` 指令，并提供必要的配置项，如 `height`、`offsetHeight`、`itemHeight` 和数据源（通常是一个响应式数组）。

   <template>
     <div class="virtual-scroll-wrapper">
       <el-table :data="largeData" v-virtual-scroll="{ wrapperClass: 'scroll-wrapper', height: '400px', itemHeight: 50 }"></el-table>
     </div>
   </template>

   <script>
   import VirtualScroll from 'vue-virtual-scroller'

   export default {
     components: { VirtualScroll },
     data() {
       return {
         largeData: [], // 实际上你需要在这里加载大量的数据
       }
     },
     mounted() {
       // 加载大量数据并填充到 `largeData`
       this.largeData = loadLargeData()
     },
   }
   </script>

3. 自定义 `VirtualScroll` 的 `onRendered` 函数，可以在每一组可视内容创建完成后执行某些操作。

mounted() {
  // 使用 `this.$refs.virtualScroll` 访问虚拟滚动实例
  this.$refs.virtualScroll.onRendered(() => {
    console.log('Finished rendering virtual scroll');
  });
},