分页组件如下

<div class="pagination">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"  //当前页信息
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalCount">
              </el-pagination>
      </div>

当前页currentPage

data(){
    return{
        currentPage:''
    }
}

发送请求的loadData

  loadData(modelId,seqNum,pageNum,pageSize){
         var _this = this;
            _this.$http.get('/api/DataDownshift/modelTable/list',{
              params:{
                modelId:modelId,
                seqNum:seqNum,
                pageNum:pageNum,
                pageSize:pageSize
              }
            })
            .then(function (response) {
              var rspCode=response.data.rspCode;
                 if(rspCode=="200"){
                    _this.tableData=response.data.data;

                    _this.totalCount=parseInt(response.data.rspMsg);
                }else if(rspCode=="500"){
                  _this.$message.error("出错了哦,有bug:"+response.data.rspMsg);
                }
              })
            .catch(function (error) {
                _this.$message.error("出错了哦,有bug:"+error);
            });
      },

search查询按钮函数

        search(){
          var _this=this;
           _this.currentPage=1;
           _this.loadData(_this.modelId,_this.seqNum, _this.currentPage,_this.pageSize);
        },

这里先让当前页为1,然后再进行查询,不然查询的时候loadData中的currentPage为2,查询数据库时是返回第二页的数据,假如pageSize为10,那么返回的是顺序9之后的数据,当查询的数据没有10条的时候,currentPage为2则返回为空。

所以查询都是从第一页开始查的,而不是第二页。点击查询后,页码应该回到1。

Logo

前往低代码交流专区

更多推荐