【VUE】el-table表格 实现滚动到底部加载更多数据

在Vue中使用Element UI的el-table组件实现滚动到底部加载更多数据，可以通过监听表格的滚动事件来判断是否滚动到了底部。以下是一个简单的实现示例：

<template>
  <div class="table-container" @scroll="handleScroll">
    <el-table
      :data="tableData"
      height="400"
      ref="table"
      @scroll.native="handleScroll"
    >
      <!-- 列配置 -->
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      loadingMore: false, // 是否正在加载更多数据
    };
  },
  methods: {
    handleScroll(event) {
      const target = event.target;
      // 检查是否滚动到底部
      if (target.scrollHeight - target.scrollTop <= target.clientHeight && !this.loadingMore) {
        this.loadingMore = true;
        // 在这里添加加载更多数据的逻辑
        // 例如：发起网络请求获取数据，然后将新数据追加到 tableData 中
        // 数据加载完成后，将 loadingMore 设置为 false
      }
    },
  },
};
</script>
 
<style>
.table-container {
  height: 400px;
  overflow-y: auto;
}
</style>

在上述代码中，.table-container 是一个具有固定高度并且可滚动的容器，用来包裹 el-table 组件。handleScroll 方法会在表格滚动时被调用，并检查是否已经滚动到底部。如果已经滚动到底部且当前没有在加载更多数据，则会开始加载更多数据。在实际应用中，你需要替换 // 在这里添加加载更多数据的逻辑 部分，以便从后端获取数据并更新 tableData。