vue-virtual-scroll-list elementui表格用法

Vue虚拟滚动列表(vue-virtual-scroll-list)是一种优化性能的技术，它适用于大量数据展示，通过只渲染可视区域的数据，避免一次性加载所有数据导致内存占用过高。在Element UI的表格(Table)中使用，可以提升大数据表格的滚动性能。

以下是基本步骤：

1. 安装`vue-virtual-scroll-list`: 首先需要安装这个插件，你可以使用npm或yarn进行安装：

   npm install vue-virtual-scroll-list

2. 引入并配置：在你的组件中引入，并在data中设置表格的数据源和分页等信息：

   <template>
     <el-table
       :data="items"
       :virtual-scroll="true"
       ...其他表格属性...
     >
       ...
     </el-table>
   </template>

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

   export default {
     components: { VirtualScrollList },
     data() {
       return {
         items: [], // 大量数据数组
         pageSize: 10, // 每页显示的数量
         currentPage: 1, // 当前页数
       };
     },
     computed: {
       virtualData() {
         const start = (this.currentPage - 1) * this.pageSize;
         const end = start + this.pageSize;
         return this.items.slice(start, end);
       }
     }
   };
   </script>

3. 利用虚拟滚动列表的`virtualScroll`选项，结合计算属性`virtualData`，它只会渲染当前视口内的数据。