elementUI-分頁功能實作

第一種：一次資料請求，前端實作分頁功能，

具體實作代碼如下：

html:  table值系結的

:data="https://www.cnblogs.com/zhu-xl/archive/2020/09/27/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 為后臺回傳的一堆表格資料組成的陣列

 1  data() {
 2     return {
 3       infoData: {},  9       dialogFormVisible: false,11       cur_page: 1,
12       pageSize: 20,
13       total: 0,
14       pageSizes:[20,30,40,50],
15     };
16   },

分頁觸發的方法，重置當前頁為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 =https://www.cnblogs.com/zhu-xl/archive/2020/09/27/ 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 檔案已經很成熟了，跟著檔案走，基本能實作后臺管理功能的需求，

標籤：其他

上一篇：告別硬編碼，讓你的前端表格自動計算

下一篇：html+css3寫switch滑動開關