vue后台常用分页

vue后台常用分页

<div class="tableDemo-page p-l-20 p-b-15">
      <el-pagination
        class="pageIndex"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage2"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="10"
        layout="total,sizes, prev, pager, next"
        :total="totalData"
      ></el-pagination>
    </div>

data里面写总条数

 data() {
    return {
      totalData: null,
      }

分页方法

 // 改变每页显示条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 2000);
      this.sendOut.limit = val;
      this.getDrillPlanInfo();
    },
    // 改变页数
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 2000);
      this.sendOut.page = val;
      this.getDrillPlanInfo();
    }