解决Element UI 表格组件懒加载数据刷新问题

<template>
  <el-table
    :data="tableData"
    border
    stripe
    :max-height="tableHeight"
    @scroll="handleScroll"
  >
    <!-- 列配置 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [],
      tableHeight: 500,
      scrollPosition: 0,
      loadingMore: false,
      noMoreData: false
    };
  },
  methods: {
    fetchData() {
      // 模拟异步获取数据
      setTimeout(() => {
        const moreData = [/* 新数据 */];
        this.tableData = this.tableData.concat(moreData);
        this.loadingMore = false;
        // 如果数据已加载完毕，设置noMoreData为true
        if (moreData.length < pageSize) {
          this.noMoreData = true;
        }
      }, 1000);
    },
    handleScroll(event) {
      const scrollTop = event.target.scrollTop;
      const scrollHeight = event.target.scrollHeight;
      const clientHeight = event.target.clientHeight;
      const scrollBottom = scrollHeight - (scrollTop + clientHeight);
 
      if (scrollBottom < 10 && !this.loadingMore && !this.noMoreData) {
        this.loadingMore = true;
        this.fetchData();
      }
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>

这个代码实例展示了如何在Element UI的表格组件中实现懒加载数据的刷新。当表格滚动到距离底部10px时，会触发加载更多数据的操作。这里的fetchData方法模拟了异步获取数据的过程，并在获取数据后更新表格数据源。同时，还有相应的加载状态和数据加载完毕的处理逻辑。