接口因为数据过多,无奈查问整表,无奈给出数据总数,且须要页面分页的状况
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; }) },