ElementUi分页

HTML

 <!-- 分页 -->
      <div style="width:100%;text-align:end">
        <el-pagination
          @size-change="handleSizeChange_detail"
          @current-change="handleCurrentChange_detail"
          :current-page="currentPage_detail"
          :page-sizes="[10, 20, 40, 80]"
          :page-size="pagesize_detail"
          layout="total, sizes,prev, pager, next"
          :total="thecount_detail"
          prev-text="上一页"
          next-text="下一页"
        ></el-pagination>
      </div>

data

 // 分页
      currentPage_detail: 1, //当前页数
      pagesize_detail: 10, //每页显示的个数
      currentPage: 1, // 当前页
      pageSize: 3, // 每页条数
      total: 0, // 数据总条数
      currentPage_detail: 1, //当前页数
      pagesize_detail: 10, //每页显示的个数
      thecount_detail: 0, //总数
  

methods

 // 分页
    handleSizeChange_detail(e) {
      //每页条数 pageSize 改变时会触发
      this.pagesize_detail = e;
      this.handleCurrentChange_detail(this.currentPage_detail);
    },
    //当前页 currentPage 改变时会触发 也会触发上下页
    handleCurrentChange_detail(e) {
      this.currentPage_detail = e;
      this.currentchangepage_detail();
    },
    currentchangepage_detail(currentPage_detail) {
      this.loadDutyDetail();
    },
    // 分页改变
    loadDutyDetail() {
      let comapi = new apicom();
      let thiscom = this;
      let from = (thiscom.currentPage_detail - 1) * thiscom.pagesize_detail;
      let to = thiscom.pagesize_detail; //固定显示条数
      let getreponse = new api();
      let url = "peronnelinfosearch.do";
      let options = {
        from: from,
        to: to,
        name: thiscom.searchform.name, //姓名
        mobile: thiscom.searchform.iphone, //电话
        deptid: thiscom.searchform.dept, //部门
        sex: thiscom.filtrateform.sex, //性别
        age1: thiscom.filtrateform.agestart, //最小年龄
        age2: thiscom.filtrateform.ageend, //最大年龄
        zzmm: thiscom.filtrateform.politics, //政治面貌
        idcard: thiscom.filtrateform.nationalid, //身份证id
        education: thiscom.filtrateform.education, //学历
        zgzc: thiscom.filtrateform.highestTitle, //最高职称
        ypzc: thiscom.filtrateform.hospitalTitle, //院评职称
        zyzs_kssj: thiscom.filtrateform.practiceData[0], //执业证书到期时间-开始时间
        zyzs_jssj: thiscom.filtrateform.practiceData[1], //执业证书到期时间-结束时间
        job: thiscom.filtrateform.operatingPost, //工作岗位
        sczllx: thiscom.filtrateform.uploadedData, //上传资料类型
        sczl_kssj: thiscom.filtrateform.uploadTime[0], //上传资料时间-开始时间
        sczl_jssj: thiscom.filtrateform.uploadTime[1], //上传资料时间-结束时间
        sczl_nr: thiscom.filtrateform.textarea //描述内容
      };
      getreponse.getDataByGet(url, options, response => {
        console.log("response", response);
        console.log("options.to", options.to);

        let datas = response.data.data;
        datas.length = options.to;
        thiscom.tableData = datas;
        thiscom.thecount_detail = response.data.count;
      });
    },
    viewdutyInfo(row) {
      this.currentSelectedDutyId = row.dutyid;
      this.currentPage_detail = 1;
      this.pagesize_detail = 10;
      this.loadDutyDetail();
      this.dlgvisible_dutydetail = true;
    },