Vue2 使用el-table-infinite-scroll

Vue2使用el-table-infinite-scroll可以通过以下步骤实现：

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

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

2.在Vue组件中引入el-table-infinite-scroll插件

import elTableInfiniteScroll from 'el-table-infinite-scroll';

export default {
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  },
  data() {
    return {
      // 数据列表
      list: [],
      // 是否还有更多数据
      hasMore: true,
      // 当前页码
      currentPage: 1,      // 每页显示的数据条数
      pageSize: 10
    };
  },
  methods: {
    // 加载更多数据
    loadMore() {
      // 如果没有更多数据，则直接返回
      if (!this.hasMore) {
        return;
      }
      // 模拟异步加载数据
      setTimeout(() => {
        // 获取数据
        const data = this.getData(this.currentPage, this.pageSize);
        // 将数据添加到列表中
        this.list = this.list.concat(data);
        // 如果返回的数据条数小于每页显示的数据条数，则说明没有更多数据了
        if (data.length < this.pageSize) {
          this.hasMore = false;
        }
        // 增加页码
        this.currentPage++;
      }, 1000);
    },
    // 获取数据
    getData(page, pageSize) {
      // TODO: 根据页码和每页显示的数据条数获取数据
      return [];
    }
  }
};

3.在el-table中使用v-el-table-infinite-scroll指令

<el-table :data="list" v-el-table-infinite-scroll="loadMore">
  <!-- 表格列 -->
</el-table>

注意：在使用v-el-table-infinite-scroll指令时，不要加上括号，否则会导致无限循环至页面崩溃。