el-table子组件实现虚拟滚动vue-virtual-scroll-list

Vue中的`el-table`是一个高度可定制的表格组件，而当数据量非常大时，为了提高性能，可以利用`vue-virtual-scroll-list`这个轻量级的虚拟滚动列表插件。它通过仅渲染可见部分的数据，而不是一次性加载所有数据，实现了滚动性能的优化。

要在`el-table`中使用`vue-virtual-scroll-list`，你需要做以下几个步骤：

1. 安装依赖：首先在你的项目中安装`vue-virtual-scroll-list`库，通常使用npm或yarn：

   npm install vue-virtual-scroll-list

2. 引入并配置：在你的组件中引入并注册`VirtualScrollList`组件，并将其应用到需要虚拟滚动的部分，例如表格的一个列或者整个表格：

   <template>
     <el-table>
       <el-table-column v-virtual-scroll="scrollOptions" ...></el-table-column>
       <!-- 或者如果整个表格需要虚拟滚动 -->
       <el-table :virtual-scroll="scrollOptions"></el-table>
     </el-table>
   </template>

   <script>
   import VirtualScrollList from 'vue-virtual-scroll-list';

   export default {
     components: { VirtualScrollList },
     data() {
       return {
         scrollOptions: {
           // 配置项，如高度、滚动区域大小等
           height: 300, // 假设每行30px高
           itemHeight: 30,
           refresher: this.refreshData, // 自定义滚动刷新方法
         }
       };
     },
     methods: {
       refreshData() {
         // 当用户滚动到底部时，这里你可以异步加载更多数据
       }
     }
   }
   </script>

3. 刷新策略：你需要在`scrollOptions`中设置`refresher`属性，当用户滚动到底部时，该函数会被调用，此时可以发送请求加载更多的数据。