Pagination 分页，看这一篇就够了。

  <div class="fenye">
     <el-pagination background 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1" 
        :page-sizes="[10, 20, 50, 100]"
        layout="sizes, prev, pager, next"
        :total="total">
      </el-pagination>
  </div>

 具体来说，这个分页组件具有以下特点和功能：

• background属性用于设置分页组件的背景样式。
• @size-change事件监听器用于在用户改变每页显示的数据量时触发相应的处理函数handleSizeChange。
• @current-change事件监听器用于在用户切换当前页时触发相应的处理函数handleCurrentChange。
• current-page.sync属性用于绑定当前页的值，即currentPage1变量的值。通过这个绑定，分页组件可以根据用户的操作来更新当前页的值。
• page-sizes属性用于设置每页显示的数据量的选项。在这个例子中，选项为[10, 20, 50, 100]，即用户可以选择每页显示10条、20条、50条或100条数据。
• layout属性用于设置分页组件的布局。在这个例子中，布局为sizes, prev, pager, next，即显示每页数据量选项、上一页按钮、页码和下一页按钮。
• total属性用于设置总数据量，即总共有多少条数据需要分页显示。

其效果为：

 

控制每页多少条时，其页码会计算页数。点击上一页，下一页时，会切换该页数据。

首先我们需要在data中定义：

 然后在方法中获取当前点击的value值，即我们点击时获取到页码和每页数量。获取到后，再调用接口，传回数据。

    // 每页条数
    handleSizeChange(value) {
      this.pageSize = value;
      this.DoReverseQuery();
    },
    // 当前页码
    handleCurrentChange(value) {
      this.PageIndex = value;
      this.DoReverseQuery();
    },

 调用接口：

DoReverseQuery() {
      // this.$refs.tablePrint.doLayout();
      console.log("this.returnObj", this.returnObj);
      if (
        (this.returnObj.CadreID && this.returnObj.CadreID.length <= 500) ||
        !this.returnObj.CadreID
      ) {
        this.returnObj.ClassId = this.typeNameId;
        delete this.returnObj.Count;
        this.returnObj.PageIndex = this.PageIndex;
        this.returnObj.pageSize = this.pageSize;
        console.log("this.returnObj", this.returnObj);
        let postData = {
          method: "get",
          data: {
            op: "/api/Cadres",
            loadingConfig: {},
            data: this.returnObj
          }
        };
        this.$http.getApi(postData).then(resData => {
          if (resData.Code == 1) {
            console.log(resData.Data.Rows);
            this.tableDataBottom = resData.Data.Rows;
            this.total = parseInt(resData.Data.Total);
            console.log("总数", this.total);
          }
        });
      } else {
        this.$message({
          message: "合计数量大于500，不允许反查！",
          type: "warning"
        });
      }
    },

在对象里面添加两个属性，PageIndex和PageSize,把对象传回后端即可。