Vue2 + ElementUI -- el-table 的 SimpleTable 封装 变种（支持滚动加载）

专栏

• Vue2 + ElementUI -- el-table 的 SimpleTable 封装
• Vue2 + ElementUI -- el-table 的 SimpleTable 封装 变种（支持滚动加载）
• Vue2 + ElementUI -- el-table 的 SimpleTable 封装 变种（自适应高度 - 固定高度篇 - 半灵活)
• Vue2 + ElementUI -- el-table 的 SimpleTable 封装 变种（自适应高度 - 固定高度篇 - 全灵活)

基于 《Vue2 + ElementUI -- el-table 的 SimpleTable 封装 》扩展支持滚动加载更多的功能

效果

实现

• 安装插件 el-table-infinite-scroll 地址

npm install el-table-infinite-scroll -S

• 全局注册 main.js

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

Vue.directive('el-table-infinite-scroll', ElTableInfiniteScroll);

• 用法 SimpleTable 为 juejin.cn/post/744509… 封装的组件
• height 指定高度，便于观察效果
• loadMore 方法默认会初始化执行一次

<SimpleTable
  :columns="infoColumns"
  :data="infoTableData"
  :isLoading="infoLoading"
  :height="280"
  v-el-table-infinite-scroll="loadMore"
  :infinite-scroll-disabled="isNoMore"
/>

export default {
    data: () => ({
        infoColumns: [],
        infoTableData: [],
        infoLoading: false,
        infoPagination: {
            pageSize: 10,
            pageNum: 1,
            total: -1,
        },
        isNoMore: false,
    )},
    methods: {
        async loadMore() {
          try {
            this.infoLoading = true;
            const { data } = await axios.get(`request_url`, {
              params: {
                ...
              },
            });
            const list = data.list || []
            this.infoTableData = [...this.infoTableData, ...list];
            this.infoPagination.pageNum += 1;
            this.infoPagination.total = (data || {}).total || 0;
            this.infoLoading = false;
            if (this.infoTableData.length >= this.infoPagination.total) {
              this.isNoMore = true;
              return;
            }
          } catch (error) {
            this.infoLoading = false;
            this.$message.error(error);
          }
        },
    }
}