vue3 elementPlus table 上拉加载更多

在 Vue3 中，Element Plus 提供了一个高度易用的数据表格组件 `el-table`，支持上拉加载更多功能。这个功能通常通过监听用户滚动事件来实现。当用户滚动到表格底部时，如果还有更多数据未展示，你可以触发一个加载更多的请求，获取下一批数据并更新表格。

以下是基本步骤：

1. **初始化表头和数据**：
首先，你需要在数据里预先定义一些初始的数据以及总记录数。例如：

   const data = []; // 初始数据数组
   const total = 0; // 总记录数

2. **添加分页属性**：
在`table`组件中，设置`show-loading`, `total`等分页属性：

   <el-table :data="data" :loading="isLoading" :total="total">
     ...
   </el-table>

`isLoading`用于显示加载状态。

3. **监听滚动事件**：
在Vue实例的`mounted()`或`watch`生命周期钩子中，监听`scroll`事件：

   import { ElTable } from "element-plus";

   export default {
     mounted() {
       this.$refs.myTable.$on("scroll", this.handleScroll);
     },
     methods: {
       handleScroll() {
         if (this.$refs.myTable.$el.scrollTop + this.$refs.myTable.$el.offsetHeight === this.$refs.myTable.$el.scrollHeight) {
           // 用户滚动到底部，开始加载更多
           this.loadMore();
         }
       },
       loadMore() {
         // 发起网络请求，假设返回新的数据和总记录数
         fetchMoreData().then((response) => {
           this.data.push(...response.data);
           this.total += response.total;
           this.isLoading = false; // 加载完成，取消加载状态
         });
       }
     }
   };

4. **模拟数据请求**：
`fetchMoreData()`是你需要自定义的函数，它会向服务器发送请求并处理响应。这里只是一个示例，实际应用中你需要替换为真实的API调用。