接口因为数据过多,无奈查问整表,无奈给出数据总数,且须要页面分页的状况

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;      })    },