vue 表格无限滚动下拉加载数据vue-infinite-loading

1. 下载vue-infinite-loading

npm install vue-infinite-loading --save

2.在需要使用的文件中引入

import InfiniteLoading from 'vue-infinite-loading';

 3.在该文件中注入组件

components: {
       InfiniteLoading,
}

 4.在表格底部插入

<el-table

:data="tableData"

v-loading="loading"

height="220"

style="width: 100%">

<el-table-column prop="id" label="编号" width="60"></el-table-column>

<el-table-column prop="accountCount" label="账号数" width="70"></el-table-column>

<el-table-column prop="type" label="仓位类型">

          <template slot-scope="scope">

                {{scope.row.type === 'MORE' ? '多仓': '空仓'}}

         </template>

</el-table-column>

<template slot="append">

          <InfiniteLoading

           @infinite="load"    //滚动鼠标时触发下拉加载的方法

           spinner="circles"    //加载中时显示为转圈

           force-use-infinite-wrapper=".el-table__body-wrapper"   //只有在表格底部滚动鼠标才能触发下拉加载>

         //加载状态的提示语

              <div slot="spinner">加载中...</div> 

              <div slot="no-more">所有数据加载完毕</div>

              <div slot="no-results">加载完毕</div>

          </InfiniteLoading>

 </template>

</el-table>

5.添加下拉加载的方法

load($state){

        //调用获取表格数据的接口

entrust.currentList(this.pageIndex, this.pageSize).then(res =>{

      if(res && res.data.code === 200 ){

            if (this.pageIndex === 1) {   

                this.tableData = res.data.data;     //首先加载后端返回的第一页的数据显示在表格中

               $state.complete();   //加载完成的状态

            }else{

                 if(!res.data.data || res.data.data.length < this.pageSize) {

                      $state.complete();   //加载完成的状态

                 }else{

                      this.tableData = this.tableData.concat(res.data.data);   //将后端新返回的数据拼接在原表格后面

                      $state.loaded();     //加载中的状态

                 }

            }

           this.pageIndex ++;    //鼠标在表格底部滑动时，翻页，即当前页数+1

     }else{

       $state.complete();      //加载完成的状态

}

})

 如有问题，欢迎留言！！