el-table长列表进行下拉分页

el-table长列表进行下拉分页

在我们开发表格的时候，一般都会用到分页，有点击页码分页和下拉分页，点击页码分页在这里就不和大家分享了，今天和大家分享一下下拉分页。

下拉分页的原理就是：el-table + 无限滚动

我使用的是一个插件：el-table-infinite-scroll
插件地址：https://www.npmjs.com/package/el-table-infinite-scroll

npm i el-table-infinite-scroll   //安装依赖

// 在main.js里面全局引入
import Vue from 'vue';
import elTableInfiniteScroll from 'el-table-infinite-scroll';

Vue.use(elTableInfiniteScroll);

// 局部引入
import elTableInfiniteScroll from 'el-table-infinite-scroll';
export default {
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  }
}

// 在el-tbale 上使用
			<el-table
              :data="tableData"
              v-loading="loading"
              border
              class="table-class"
              v-el-table-infinite-scroll="load"   // 下拉分页的方法
              ref="table"
              lazy
              @sort-change="sortChange"
              max-height="790"
            >
	              <el-table-column prop="id" label="序号" width="50" align="center">
	                <template slot-scope="scope">
	                  <span>{{ scope.$index + 1 }}</span>
	                </template>
	              </el-table-column>
             </el-table>

		// 查询列表的方法
		checkStratery(){
			...
		}
		load(){
			if (
    			this.page < 1 ||
  				(this.$refs.table &&
           		this.$refs.table.bodyWrapper &&
           		this.$refs.table.bodyWrapper.scrollTop == 0)
       		) {
        		return false;
       		}
       		setTimeout(() => {
        		this.page += 1;   // 滚动到最底下的时候 page+1
        		this.checkStratery();  // 然后执行一下查询表格数据的接口
     		}, 500);
		}

这样，下拉分页的功能就完成了。