el-table自动无限滚动

为了实现el-table的自动无限滚动，你需要使用element-ui提供的load方法和scroll事件。具体步骤如下：

1.在el-table中添加ref属性，以便在代码中引用它。

2.在mounted钩子函数中获取el-table的dom元素，并为其添加scroll事件监听器。

3.在scroll事件处理程序中，判断是否滚动到了底部，如果是，则调用load方法加载更多数据。

4.在methods中定义load方法，用于异步加载更多数据。在load方法中，你可以向后端发送请求获取更多数据，并将其添加到el-table的数据源中。

下面是一个示例代码，它实现了el-table的自动无限滚动：

<template>
  <el-table
    ref="table"
    :data="tableData"
    height="500"
    border
    @load="loadData"
  >
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  mounted() {
    const tableBody = this.$refs.table.$el.querySelector(
      ".el-table__body-wrapper"
    );
    tableBody.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      const tableBody = this.$refs.table.$el.querySelector(
        ".el-table__body-wrapper"
      );
      const scrollBottom =
        tableBody.scrollHeight - tableBody.scrollTop - tableBody.clientHeight;
      if (scrollBottom <= 0) {
        this.$refs.table.load();
      }
    },
    async loadData() {
      const res = await fetch(
        `https://api.example.com/data?page=${this.currentPage}&pageSize=${this.pageSize}`
      );
      const data = await res.json();
      this.tableData = [...this.tableData, ...data.list];
      this.total = data.total;
      this.currentPage++;
    },
  },
};
</script>