VUE elementUi table下拉触底后加载数据

在Vue中使用element-ui的Table组件时，如果需要在下拉触底时加载更多数据，可以使用Table组件的scroll事件来检测滚动条的位置，并在触底时触发加载数据的方法。以下是一个简单的示例：

<template>
  <el-table
    :data="tableData"
    @scroll="handleScroll"
    height="400" <!-- 设置固定高度以启用滚动 -->
    v-loadmore="loadMore" <!-- 自定义指令，用于简化加载更多的逻辑 -->
  >
    <!-- 列定义 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      loadingMore: false, // 是否正在加载更多数据
    };
  },
  methods: {
    handleScroll(event) {
      const target = event.target;
      // 检查是否滚动到底部
      if (target.scrollHeight - target.scrollTop <= target.clientHeight) {
        this.loadMore();
      }
    },
    loadMore() {
      if (this.loadingMore) return;
      this.loadingMore = true;
      
      // 模拟异步加载数据
      setTimeout(() => {
        // 添加更多数据到tableData
        // ...
 
        this.loadingMore = false;
      }, 1000);
    },
  },
};
</script>

在这个示例中，我们定义了一个handleScroll方法，它会在Table的滚动事件发生时被调用。我们检查滚动容器的总高度减去当前滚动的距离是否小于或等于客户区的高度，如果是，则认为已经触底，并调用loadMore方法来加载更多数据。

loadMore方法设置了一个布尔值loadingMore来防止在数据加载过程中重复触发加载。一旦数据加载完成，loadingMore被重置为false。

注意：这里使用了一个自定义指令v-loadmore来简化加载更多的逻辑，但实际上并没有定义这个指令，因为它超出了问题的范围。如果需要实现自定义指令，可以参考Vue官方文档来了解如何定义和使用自定义指令。