如何在 Vue3 中结合 Element Plus 使用 el-table 实现滚动到底部时动态加载更多数据并显示'加载中'状态?

在 Vue3 中，你可以通过以下步骤结合 Element Plus 的 `el-table` 实现当表滚动到底部时动态加载更多数据，并显示 '加载中' 状态：

1. **安装依赖**:
首先，你需要安装 Element Plus 和 Axios 或其他你喜欢的 HTTP 库用于发送 AJAX 请求。使用 npm 安装：

   npm install element-plus axios

2. **设置组件结构**:
在 Vue 组件中，创建一个 `el-table` 组件，并为其添加 `v-loading` prop 来控制是否显示加载状态：

   <template>
     <div>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-loading v-model="loading" text="加载中" :indicator="loadingIndicator"></el-loading>
           <el-table :data="tableData" @scroll-bottom="loadMore">
             <!-- table columns -->
           </el-table>
         </el-col>
       </el-row>
     </div>
   </template>

3. **数据管理**:
创建一个 `tableData` 数组存储表格的数据，以及 `page` 和 `pageSize` 变量管理分页信息：

   data() {
     return {
       tableData: [],
       loading: false,
       loadingIndicator: 'el-icon-loading',
       page: 1,
       pageSize: 10 // 每次加载的数量
     };
   },

4. **加载更多函数**:
当用户滚动到底部时，触发 `loadMore` 函数，根据当前页数加一请求更多数据：

   methods: {
     async loadMore() {
       if (this.loading) return; // 如果正在加载，阻止多次请求

       this.loading = true;
       try {
         const res = await yourApiCall({ page: this.page + 1, pageSize: this.pageSize });
         this.tableData.push(...res.data); // 将新数据添加到现有数据数组中
       } catch (error) {
         console.error('Error fetching more data:', error);
       }
       this.loading = false; // 加载完成后关闭加载状态
     }
   },

5. **API 调用**:
这里假设有一个名为 `yourApiCall` 的函数，它接受当前页码和每页大小作为参数，返回包含更多数据的响应。实际项目中请替换为你的 API 请求。