el-table滚动懒加载

实现 el-table 的滚动懒加载，可以使用 element-ui 提供的 `load` 属性和 `scroll` 事件。

首先，需要设置 el-table 的 `height` 属性，让其具有滚动条。然后，在 el-table 上添加 `@scroll` 事件监听器，当表格滚动时触发事件。

在 `@scroll` 事件处理程序中，可以通过计算表格滚动的距离和表格内容的高度，来判断是否需要加载更多数据。如果滚动距离接近内容高度的底部，就触发 `load` 事件，并传递一个回调函数作为参数，该回调函数用于加载数据并更新表格。

以下是一个示例代码：

<template>
  <el-table :data="tableData" :height="tableHeight" @load="loadData" @scroll="handleScroll">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <!-- ... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 20,
      totalCount: 0,
      tableHeight: 400, // 设置表格高度
    };
  },
  methods: {
    // 加载数据
    loadData(callback) {
      // 发送请求获取数据
      // ...
      // 更新表格数据
      this.tableData = [...this.tableData, ...newData];
      // 调用回调函数通知表格加载完成
      callback();
    },
    // 监听表格滚动事件
    handleScroll(event) {
      const tableBody = event.target.querySelector('.el-table__body-wrapper');
      const scrollBottom = tableBody.scrollHeight - tableBody.scrollTop - tableBody.clientHeight;
      if (scrollBottom < 50) { // 当滚动距离接近底部时，触发 load 事件
        this.$refs.table.$emit('load');
      }
    },
  },
};
</script>

注意，在实际应用中，需要根据具体的业务逻辑进行调整和优化。