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);
}
这样,下拉分页的功能就完成了。