el - table 无限滚动

el-table 无限滚动是指在表格中滚动时，可以动态加载更多的数据，而不是一次性加载所有数据。这种方式可以提高表格的性能和用户体验。下面是使用 element-ui 和 el-table-infinite-scroll 插件实现 el-table 无限滚动的步骤：

1. 安装 el-table-infinite-scroll 插件：

npm install --save el-table-infinite-scroll

2. 在需要使用无限滚动的 el-table 组件上添加 v-el-table-infinite-scroll 指令，并绑定一个方法，该方法会在滚动到底部时被调用：

<template>
  <el-table v-el-table-infinite-scroll="loadMoreData" :data="tableData" height="300">
    <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>
import ElTableInfiniteScroll from 'el-table-infinite-scroll';

export default {
  directives: { ElTableInfiniteScroll },
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
    };
  },
  mounted() {
    this.loadMoreData();
  },
  methods: {
    loadMoreData() {
      // 模拟异步加载数据
      setTimeout(() => {
        const newData = [];
        for (let i = 0; i < this.pageSize; i++) {
          const index = (this.currentPage - 1) * this.pageSize + i;
          newData.push({
            date: `2016-05-${index + 1}`,
            name: `王小虎${index}`,
            address: `上海市普陀区金沙江路 ${index} 弄`,
          });
        }
        this.tableData = [...this.tableData, ...newData];
        this.currentPage++;
      }, 1000);
    },
  },
};
</script>

在上面的例子中，loadMoreData 方法会模拟异步加载数据，并将新数据添加到表格数据中。每次加载数据时，currentPage 会自增，以便下次加载时获取正确的数据。