el-table滚动加载更多

在Vue.js的Element UI库中，`el-table`组件提供了一种滚动加载更多（Infinite Scroll or Load More on Scroll）的功能，它允许你在表格内容滚动到底部时自动加载更多的数据，而无需手动分页。以下是基本的使用步骤：

1. 安装依赖：首先确保已安装了Element UI和Vue。

2. 配置表头：在`<el-table>`标签中设置`data-source`属性，这是动态数据源，一般是一个数组，初始化时只包含一部分数据。

<template>
  <div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="totalCount" :page-size="pageSize"></el-pagination>
    <el-table :data="tableData.slice(0, pageSize)" :loading="isLoading">
      <!-- ... 表格列定义 -->
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 初始数据
      totalCount: 0, // 总数据量
      pageSize: 10, // 每次加载的数据量
      isLoading: false, // 加载状态
    };
  },
  methods: {
    loadMore() {
      if (this.tableData.length >= this.totalCount) {
        return;
      }
      
      // 在这里模拟异步加载更多数据
      setTimeout(() => {
        const newRows = ...; // 加载新的数据
        this.tableData.push(...newRows);
        this.isLoading = false; // 设置加载完成
      }, 2000); // 虚拟延迟2秒，以模拟网络请求时间
    },
    
    handleSizeChange(size) {
      this.pageSize = size;
    },
    handleCurrentChange(page) {
      this.loadMore();
    },
  },
};
</script>

3. 实现滚动加载：当用户滚动到底部时，触发`loadMore`方法，该方法检查是否还有更多数据可以加载，并在满足条件时发送请求获取新数据。

4. 异步处理：通常你需要在后台服务那里实现数据分页查询，然后返回下一页的数据，例如通过`offset + limit`的方式。

注意：这只是一个简化的示例，实际项目中可能需要根据具体的业务需求和API设计进行调整。