Vue.js備忘錄——分頁展示

       在工作中，背景傳過來的資料辣麼多，想要展示在一屏上面顯然是不夠明智的，因而分頁變成了不可或缺的一個功能。下面是我在分頁的時候的一個基本模版，一起來看下吧！

環境：

       我是用webpack模闆搭建的vue項目，結合了element-UI。（搭建安裝方法網上有炒雞多，各位自己去找到适合自己的吧）

       vue版本：2.9.6

代碼：

寫在<template>标簽中的html代碼段： 

<div>
    <!-- 這裡綁定的data資料是原data資料經過slice函數的切段得到的子數組 -->
    <el-table :data="data.slice(this.pagination.pageSize * (this.pagination.current - 1), this.pagination.pageSize * this.pagination.current)">
      <el-table-column prop="id" label="編号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
    </el-table>
    <div>
      <!-- 這邊el-pagination中的屬性可以去element-UI的官方文檔去檢視 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.current"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next"
        :total="data.length"
      ></el-pagination>
    </div>
</div>
           

寫在<script>标簽中的JavaScript代碼段：

export default {
  data() {
    return {
      pagination: {   //有關分頁的屬性放在了一個對象中
        pageSize: 2,
        current: 1,
      },
      data: [
        {
          id: 1,
          name: "A"
        },
        //這裡的資料可以随便加，一般情況下這裡的資料都是背景通過接口傳過來的
      ]
    };
  },
  methods: {
    handleSizeChange() {},
    //每當點選分頁欄時觸發的函數：作用是更新分頁資訊。
    handleCurrentChange(val) {
      this.pagination = {
        current: val,         //記錄你目前頁面，通過點選分頁頁碼傳入值
        order: 1,             //排序的順序
        pageSize: 2,          //每頁放幾條資料
        sort: "id",           //排序的依據
        totalElements: 5      //資料總條數
      };
    }
  }
};
           

分析：

       分頁的實質其實就是将一個大集合按照一定的規則分成一些小的集合并且展示到頁面上。在這邊，我們通過利用分頁的屬性current（目前頁面）和pageSize（每頁顯示條目數量）來對數組data進行切分 ，并渲染在table上。

注：1.<style>标簽中的樣式可以自行修改。

       2.參考網址：Pagination 分頁：https://element.eleme.cn/#/zh-CN/component/pagination

                            Table 表格：https://element.eleme.cn/#/zh-CN/component/table

***另，本文均為個人見解，如果有更好的解決方法，或者說有錯誤，還請各位海涵并指正，謝謝！***