elementui中el-table实现下拉加载

在Element UI的el-table组件中实现下拉加载通常需要结合Vue的滚动事件监听来实现。以下是一个简单的实现示例：

<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <!-- 列配置 -->
    </el-table>
    <div
      v-if="hasMore"
      style="text-align: center; margin-top: 10px;">
      <el-button
        :loading="loading"
        @click="loadMore">
        {{ loading ? '加载中...' : '下拉加载更多' }}
      </el-button>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [],
      loading: false,
      hasMore: true,
      page: 1,
      pageSize: 10,
    };
  },
  methods: {
    fetchData() {
      // 模拟异步获取数据
      this.loading = true;
      setTimeout(() => {
        const moreData = Array.from({ length: this.pageSize }, (_, i) => ({
          id: (this.page - 1) * this.pageSize + i,
          name: `Item ${(this.page - 1) * this.pageSize + i}`,
        }));
        this.tableData = [...this.tableData, ...moreData];
        this.loading = false;
        this.page += 1;
      }, 1000);
    },
    loadMore() {
      if (!this.loading) {
        this.fetchData();
      }
    },
    handleScroll(event) {
      const { scrollTop, scrollHeight, clientHeight } = event.target;
      if (scrollTop + clientHeight >= scrollHeight - 5 && this.hasMore) {
        this.loadMore();
      }
    },
  },
  mounted() {
    this.fetchData();
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
};
</script>

在这个示例中，我们定义了一个loadMore方法来模拟加载更多数据，并在mounted钩子中添加了滚动事件监听。当用户滚动到距离底部5px时，会触发loadMore方法，从而加载更多数据。数据加载时显示加载按钮，并在加载结束后恢复按钮文本。

请注意，这个示例使用了setTimeout来模拟异步获取数据，并且在实际应用中你需要替换为真实的数据获取逻辑。同时，这个示例没有考虑性能优化，例如防抖和节流，在实际应用中应该加以考虑。