elementUI 表格滚动分页加载请求数据

在使用Element UI的表格（el-table）进行滚动加载时，你可以监听表格的滚动事件，并在用户滚动到表格底部时触发加载更多数据的操作。以下是一个简单的例子：

<template>
  <el-table
    :data="tableData"
    height="400"
    @scroll="handleScroll"
    v-loading="loading"
  >
    <!-- 列配置 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [],
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
    };
  },
  methods: {
    fetchData() {
      this.loading = true;
      // 模拟异步请求数据
      setTimeout(() => {
        // 这里应该是发起请求获取数据
        const start = (this.page - 1) * this.pageSize;
        const end = start + this.pageSize;
        this.tableData = Array.from({ length: this.pageSize }, (_, i) => ({
          id: start + i,
          name: `Name ${start + i}`,
          // ...其他数据
        }));
        this.total = 100; // 假设总数据量为100
        this.loading = false;
      }, 1000);
    },
    handleScroll(event) {
      const target = event.target;
      // 检查是否滚动到底部
      if (target.scrollHeight - target.scrollTop <= target.clientHeight) {
        if (this.tableData.length < this.total) {
          this.page += 1;
          this.fetchData();
        }
      }
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>

在这个例子中，我们设置了表格的height属性，使其可以滚动。当表格滚动到底部时，我们通过监听scroll事件来判断并加载更多数据。fetchData方法用于异步获取数据，并模拟了一个请求过程。在实际应用中，你需要替换这部分代码以发起真实的网络请求，并处理返回的数据。