接口因为数据过多,无法查询整表,无法给出数据总数,且需要页面分页的情况

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

charlotteeeeeee
74 声望7 粉丝