iview分页查询时遇到的坑

简介：当后台给你返回数据 假设此时返回13条数据 状态是10条‘审核通过’ 3条‘审核失败’ 前端设置每页显示10条 下面会有两页 此时 当你点击第二页的时候 在去更改状态值 只查询‘审核失败’，此时页面数据为空白

原因：此时你给后台创的是页面2 但是呢 就三条数据 页面二肯定为空 所有 当你每次查询的时候 都要将页面重置为1 

<template>
    <div>
        <span class="ml20">状态:</span>
          <Select
            v-model="status"
            placeholder="请选择状态"
            style="width:150px;"
            @on-change="stateChange"
          >
          <Option v-for="item in statusList" :value="item.value" :key="item.value">{{item.lable}}</Option>
          </Select>
            <Button
            type="info"
            class="mr20"
            style="width:100px"
            :loading="loading3"
            @click="query(1)"
          >
            <span v-if="!loading3">查询</span>
            <span v-else>查询</span>
          </Button>
            <div id="application_table" class="mt15">
      <Table border :columns="columns1" :data="data1"></Table>
      <div class="tr mt15">
        <Page
          v-if="startRow!=0"
          :total="total"
          :current="startRow"
          :page-size="endRow"
          @on-change="pageChange"
          @on-page-size-change="pagesizechange"
          show-sizer
          show-total
        ></Page>
      </div>
    </div>
    </div>
</template>
export defaule{
    data(){
        return{
            loading3 ：false,
            status: "all",
          statusList: [
        {
          lable: "全部",
          value: "all"
        },
        {
          lable: "注册无资料",
          value: "0"
        },
        {
          lable: "信贷员待审核",
          value: "1"
        },
        {
          lable: "审核通过",
          value: "2"
        },
        {
          lable: "审核失败",
          value: "3"
        }
      ],       lable: "审核通过",
          value: "2"
        },
        {
          lable: "审核失败",
          value: "3"
        }
      ], 
        data1: [],
        total: 0,
        startRow: 1,
        endRow: 10,
        }
    },
    methods:{
     /// 状态
    stateChange(status) {
      this.status = status;
    },
    //分页
    pageChange(page) {
      this.startRow = page;
      this.query(page);
    },
    pagesizechange(page) {
      this.startRow = 1;
      this.endRow = page;
      this.query(1);
    },
     //查询
     query(startRow) {
      let date1 = Date.parse(new Date(this.beginTime)) / 1000;
      let date2 = Date.parse(new Date(this.endTime)) / 1000;
      if (date1 > date2) {
        this.$Modal.warning({
          title: "提示",
          content: "<p>开始时间不得大于结束时间</p>"
        });
        return false;
      }
      this.loading3 = true;
       let data = {
        channelCode: this.channel == "all" ? "" : this.channel,
        loanStatus: this.status == "all" ? "" : this.status, //状态
        pageNum: startRow,
        pageSize: this.endRow,
        phoneNumber: this.phone,
        realName: this.name,
        registerBeginTime: this.beginTime,
        registerEndTime: this.endTime
      };
      this.http
        .post(BASE_URL + "后台接口", data)
        .then(data => {
          if (data.code == "success") {
            this.loading3 = false;
            this.data1 = data.data.dataList;
            this.startRow = Math.ceil(data.data.startRow / this.endRow);
            this.total = data.data.total;
          } else {
            this.loading3 = false;
            this.$Modal.warning({
              title: "温馨提示",
              content: "<p>" + data.message + "</p>"
            });
          }
        })
        .catch(err => {
          console.log(err);
          this.loading3 = false;
        });
    },
    mounted(){
        this.query(1);
    }
    
}