vue3 el-table 滚动加载数据

Vue3中的`el-table`组件是Element UI库中的表格组件，它支持滚动加载数据（通常称为无限滚动或懒加载）。当用户滚动到表格底部时，如果还有更多数据未展示，滚动加载功能会自动向服务器请求下一页的数据并更新表格内容。

以下是实现滚动加载的基本步骤：

1. 配置`el-table`：设置`scroll-y`属性为true，开启垂直滚动，并给需要监听滚动事件的元素添加`@scroll`事件处理器。

<template>
  <el-table :data="tableData" :height="tableHeight" @scroll="loadMore">
    <!-- ...表头... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 初始数据
      tableHeight: '400px', // 设置固定高度或动态计算
      page: 1, // 当前页数
      pageSize: 10, // 每页显示的行数
    };
  },
  methods: {
    loadMore() {
      if (this.tableBottomReached()) { // 判断是否到达底部
        this.fetchMoreData(); // 发送请求加载更多数据
      }
    },
    fetchMoreData() {
      this.page++; // 加一，请求下一页
      // 这里发送异步请求获取更多数据，例如：
      axios.get('api/data?page=' + this.page)
        .then(response => {
          const newData = response.data; // 新的数据
          // 将新数据合并到已有数据中
          this.tableData.push(...newData);
        })
        .catch(error => {
          console.error('Failed to load more data:', error);
        });
    },
    tableBottomReached() {
      // 返回滚动条距离文档底部的距离小于等于某个阈值时的布尔值
      const scrollEl = document.querySelector('.el-table');
      const clientHeight = scrollEl.clientHeight;
      const scrollTop = scrollEl.scrollTop + clientHeight;
      const scrollHeight = scrollEl.scrollHeight;
      return scrollTop >= scrollHeight - clientHeight;
    }
  },
};
</script>