接口因为数据过多,无奈查问整表,无奈给出数据总数,且须要页面分页的状况
1.pagination vue 展现
<el-pagination
class="table-pager"
@current-change="currentchange"
:current-page.sync="current"
:page-size="pagesize"
:total="total"
layout="prev,next">
</el-pagination>
2.初始化值
- 分页组件的layout仅展现左右键按钮
- total值必填,先默认为pagesize
- current以后页码,默认1
- 应用以后页码变动触发分页事件
3.以后页码变动触发
- 批改页码前的当前页码数与每页数量的乘积是否曾经大于计算的total值,如果大于则没有下一页
- 如果能进入下一页,则须要再更新一下total值,便于下一轮能进入下一页
- 如果current在获取数据的时候曾经小于pagesize,,则示意没有更多信息,无须再进入下一页,即不须要更新total
- 简而言之,下一页的按钮是否能触发,取决于当前页的返回数据的长度是否等于pagesize,如果等于则须要把total再减少一个pagesize值。否则不减少,也不能再点击下一页。
currentchange(val){
if((this.current-1)*this.pagesize > this.total){
this.$message({
type:'warning',
message:`没有信息了`
})
this.current=val-1;
return
}
this.current=val;
this.getAccessLogs()
},
getAccessLogs(){
this.loading=true;
if(this.current==1){
this.total=this.pagesize
}
this.$apollo.query({
query: gqlreq.accessLogs,
variables:{
first:this.pagesize,
offset:((this.current-1)>=0)?(this.current-1)*this.pagesize:0
}
}).then(async (res) => {
this.loading=false;
if (res.data && res.data.accessLogs&& res.data.accessLogs) {
this.tabledata=commonjs.takeoffEdges(res.data, "accessLogs");
if((this.tabledata&&this.tabledata.length)){
if(!(this.tabledata.length<this.pagesize)){
this.total=(this.current+1)*this.pagesize
}
}else{
this.$message({
type:'warning',
message:`以后查问第${this.current}页,没有信息了`
})
}
}
}).catch((e)=>{
console.log('catch err',e)
this.loading=false;
})
},
发表回复