v-infinite-scroll 结合el-table

你好！可以使用 `v-infinite-scroll` 指令结合 `el-table` 来实现无限滚动加载数据。下面是一个示例代码：

<template>
  <el-table
    :data="tableData"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="loading"
    infinite-scroll-distance="10"
  >
    <!-- 表格列定义 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      loading: false, // 加载状态
      pageNo: 1, // 当前页码
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      // 模拟异步加载数据
      this.loading = true;
      setTimeout(() => {
        // 模拟从后端获取数据，这里使用了 axios
        axios.get('/api/data', { params: { pageNo: this.pageNo }})
          .then(response => {
            this.tableData = this.tableData.concat(response.data); // 追加数据
            this.loading = false; // 加载完成
            this.pageNo++; // 下一页
          })
          .catch(error => {
            console.error(error);
            this.loading = false; // 加载失败
          });
      }, 1000);
    },
    loadMore() {
      if (!this.loading) {
        this.loadData();
      }
    },
  },
};
</script>

在上述代码中，`v-infinite-scroll` 指令绑定了 `loadMore` 方法，当滚动到表格底部时，会触发 `loadMore` 方法来加载更多数据。`infinite-scroll-disabled` 属性用于控制是否禁用无限滚动，`infinite-scroll-distance` 属性指定距离底部多少像素触发加载。

你可以根据自己的实际需求进行修改和扩展，例如设置加载阈值、处理错误等。希望这能帮助到你！如果还有其他问题，请继续提问。