elementUI-分頁功能實現

第一種：一次數據請求，前端實現分頁功能。

具體實現代碼如下：

html:  table值綁定的

:data="infoData.canNotScraps.slice((cur_page-1)*pageSize,cur_page*pageSize)" 根據當前頁自動計算要顯示的哪一頁數據

<el-dialog title="不能報廢的卡號" center :visible.sync="dialogFormVisible" width="60%">
      <el-table v-if="infoData.canNotScraps" :data="infoData.canNotScraps.slice((cur_page-1)*pageSize,cur_page*pageSize)" stripe border>
          <el-table-column prop="card_no" label="卡號"></el-table-column>
          <el-table-column prop="card_state_name" label="狀態"></el-table-column>
      </el-table>
      <!-- 分頁組件ui -->
      <div style="margin-top:20px" class="pagination">
        <el-pagination
        background
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="cur_page"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        ></el-pagination>
      </div>
</el-dialog>

 

js：

infoData為后台返回數據，

infoData.canNotScraps 為后台返回的一堆表格數據組成的數組

 data() {
    return {
      infoData: {},  9       dialogFormVisible: false,11       cur_page: 1,
      pageSize: 20,
      total: 0,
      pageSizes:[20,30,40,50],
    };
  },

分頁觸發的方法，重置當前頁為1

  // 分頁導航改變頁碼大小在method里定義
    handleSizeChange(val) {
        this.pageSize=val;
        this.cur_page=1;
    },
    // 分頁導航
    handleCurrentChange(val) {
        this.cur_page = val;
    }

第二種：分頁功能每次點擊去請求后台接口。

html: 在頁面上定義分頁組件 並且分配默認值

 <div style="margin-top:20px" class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="cur_page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
   </div>

js: 在data里定義默認值 並初始化

  tableData: [],
      cur_page: 1,
      pageSize: 20,
      total: 0,

 method 里定義請求數據的方法 和 handleCurrentChange 、handleSizeChange

getData() {
      let params = {
        pageNo: this.cur_page,
        pageSize: this.pageSize,
        applyCode: this.applyCode,
        state: this.state,
        settlementOrgId: this.settlementOrgIds.slice(-1).toString(),
        createdByName: this.createdByName,
        startDate: this.time[0],
        endDate: this.time[1],
        templateType: this.templateType,
        templateCode: this.templateCode,
        templateName: this.templateName,
      };
      getStockInList(params).then((res) => {
        this.tableData = res.records;
        this.total = res.total;
        this.cur_page = res.current;
        this.pageSize = res.size;
      });
    },  // 分頁導航改變頁碼大小 每次值改變 就去請求接口
    handleSizeChange(val) {
      this.pageSize = val;
      this.cur_page = 1;
      this.getData();
    },
    // 分頁導航 每次值改變就去請求接口
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData();
    },

element ui 文檔已經很成熟了。跟着文檔走，基本能實現后台管理功能的需求。