关于javascript:elementUI分页在不知道总数的时候完成分页

3次阅读

共计 1345 个字符,预计需要花费 4 分钟才能阅读完成。

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

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;
      })
    },
正文完
 0