el-table 实现下拉加载

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

2、全局

        import elTableInfiniteScroll from 'el-table-infinite-scroll'; 
        Vue.use(elTableInfiniteScroll);

3、局部组件

import elTableInfiniteScroll from 'el-table-infinite-scroll';
export default {
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  }
}

4、使用

<el-table @select="onTableSelect" :infinite-scroll-immediate="false" :v-el-table-infinite-scroll="load" row-key="id" ref="multipleTableAll" @cell-click="clickTable"  @expand-change="changeExpand" height="100%" :data="tableData" :header-cell-style="tableHeaderColor_G" @selection-change="handleSelectionChange">
...
</el-table>

// :infinite-scroll-immediate="false" true为未铺满立即加载,false不加载 与 :v-el-table-infinite-scroll="load" 
//其中load为重复加载page++ 内容
// infinite-scroll-distance="'50px'" 距离多长触发加载

 <div class="alertBox">
        <el-alert v-show="isflag" title="正在努力加载中..." type="success" center :closable="false" show-icon />
        <el-alert v-show="isMore" title="没有更多啦！" type="warning" center show-icon />
  </div>
// 可定位到tableBox底部，加载中/全部加载完成之后提示

5、js的load内容

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

export default {
     directives: {
        'el-table-infinite-scroll': elTableInfiniteScroll
    },
    data(){
        return{
              page: 1,
              pageSize: 10,
              count: 0,
              tableData: [],
              isflag: false,
              isMore: false,
        }
    },
    methods:{
        async load(){

      let nowTime = new Date().getTime()
      let diffTime = (nowTime - this.lastTime) / 1000
      if (diffTime > 1) { //添加时间戳 防止多次触发
        if (this.tableData.length < this.count) {  //目前tableData数小于count可再次触发
          this.page++
          this.isMore = false
          this.isflag = true
          if (this.isflag) {
            let params = {
              page: this.page,
              pageSize: this.pageSize
            }
            let data = await this.$api.table.list(params)
            this.isflag = false
            if (data) {
              let arr = data.data.list || []
              this.tableData = _.concat(this.tableData, arr)
            }
          }
        } else {
          this.isMore = true
        }
      }
      this.lastTime = nowTime
        }

    }

}