elementui 滚动加载

ElementUI 提供了一个非常方便的组件 el-infinite-scroll，该组件可以实现滚动加载。以下是使用 el-infinite-scroll 实现滚动加载的基本步骤：

1. 在需要实现滚动加载的组件上添加 v-infinite-scroll 指令，例如：

   <el-table v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">

在这个例子中，我们将 v-infinite-scroll 指令绑定到 loadMore 方法，这个方法会在滚动到底部时被触发。infinite-scroll-disabled 属性表示是否禁用滚动加载，infinite-scroll-distance 属性表示滚动到底部时距离底部的距离。

2. 实现 loadMore 方法，这个方法会在滚动到底部时被触发，例如：

   loadMore() {
     this.loading = true; // 开始加载
     // 发送请求获取新数据
     fetchData().then((data) => {
       this.data = this.data.concat(data); // 追加新数据
       this.loading = false; // 加载完成
     });
   }

在这个例子中，我们通过 fetchData 方法获取新数据，并将新数据追加到原有数据中。注意在加载数据时要将 loading 状态设置为 true，在加载完成后要将 loading 状态设置为 false。

3. 最后，为 el-infinite-scroll 组件添加样式，例如：

   .el-table__body-wrapper {
     max-height: 400px;
     overflow-y: auto;
   }

在这个例子中，我们为 el-table__body-wrapper 元素添加了一个最大高度和纵向滚动条，这样当数据量很大时，el-table__body-wrapper 就会出现滚动条，从而实现滚动加载。