Element Plus的Pagination 元件用法

5.2  Pagination 元件

分頁元件通常與表格元件一同使用，在資料量很大的時候，通常不會在表格中一次性顯示所有的資料，因為如果所有資料都展示在一個頁面，資料量龐大，容易造成瀏覽器崩潰，就算資料可以完全展示出來，這樣的頁面也會讓使用者失去興趣，而不會全部瀏覽。所以通常會將資料進行少量展示，分頁處理，如果使用者感興趣，則會單擊更多的頁碼進行瀏覽，這樣的介面更加簡潔，方便使用者，使使用者更願意在頁面上停留。

和表格元件一樣，分頁元件也有其常用的事件和方法，通常也有一套常用的檢視表現，如有上一頁、下一頁、首頁、尾頁、顯示總頁數、翻頁等。因為使用頻繁，Element 也對分頁元件進行了封裝，並充分考慮了常用的場景，所以也能滿足很多常用開發需求。本節將對其常用功能進行介紹。

元件的引入方式

Pagination 元件由<el-pagination> 標籤組成。el-pagination 具有多種屬性、插槽和事件，主要控制表格整體。el-column 同樣有多種屬性，主要控制表格各列的配置。兩種標籤配合使用，讓Table 支援行列合併、樹形展示等相對複雜且常用的功能。如果是全域性引入了Element Plus ，則可以直接在元件或頁面中使用<el-table> 和<el-table-column> 標籤並配置標籤屬性的事件和方法，以展示表格資料。如果使用按需引入方式，則需要將Table 元件和TableColumn 元件按如下方式先引入：

import { ElPagination } from 'element-plus'

// app 是Vue.createApp() 建立的應用例項

app.use(ElPagination);

元件的用法

分頁展示的通常是：資料總條數、每頁展示數、上一頁、下一頁、首頁、尾頁、頁碼和跳轉頁碼。下面將展示分頁元件的用法。

【例5.17 】基礎用法

Pagination 元件的使用非常簡單，如果只需要展示頁碼、上一頁和下一頁，如圖5.21 所示。

圖5.21  pagination 元件的基礎展示

實現程式碼如下：

<el-pagination layout="prev, pager, next,jumper,sizes,total" :total="1000"></el-pagination>

其中layout 用來指定分頁元件的佈局，即定義展示的分頁元件及其展示順序，元件定義如下：

l   prev ：上一頁的按鈕。

l   pager ：頁碼列表。

l   next ：下一頁的按鈕。

l   jumper ：跳轉到。

l   total ：資料總條數。

l   sizes ：每頁顯示的資料條數/ 分頁大小。

l   -> ：該元件將其右側的元件包裹起來，整體靠右對齊。

l   slot: 額外自定義內容插槽。

其中，各元件用逗號分隔。

layout 的值的順序決定了元件顯示的位置，比如：

layout="total,prev, pager, next,->,jumper,sizes"

這個設定的分頁元件元件將按照如圖5.22 所示的順序佈局。

圖5.22  Pagination 元件佈局

可以看到，上述layout 元件由“→”分隔成左右兩邊：

l   左 邊 ： 資料總條數（total ） → 上一頁（prev ） → 頁碼列表（pager ） → 下一頁（next ）。

l   右 邊 ： 跳轉到 →jumper → 分頁大小sizes 。

【例5.18 】改變展示的頁碼數

預設展示的頁碼數是7 ，若超過則會摺疊頁碼（以省略號展示），如果要改變預設展示的頁碼數，則可以在el-pagination 標籤上指定page-count 屬性，如展示11 個頁碼數，效果如圖5.23 所示。

圖5.23  Pagination 改變頁碼數

實現程式碼如下：

<el-pagination layout="prev, pager, next,jumper,total" :total="1000"  :pager-count="11"></el-pagination>

【例5.19 】帶背景色的頁碼

在el-pagination 上新增一個background 屬性，即可為每個頁碼新增背景色，效果如圖5.24 所示。

圖5.24  Pagination 帶背景色的頁碼效果

實現程式碼如下：

 <el-pagination layout="prev, pager, next,jumper,total" :total="1000"  background ></el-pagination>

 

【例5.20 】小型分頁

如果空間有限或者小螢幕中使用分頁元件，則可以透過配置small 屬性縮小分頁元件的大小，實現程式碼如下：

<el-pagination small layout="prev, pager, next" :total="50"> </el-pagination>

【例5.21 】只有一頁時隱藏分頁

頁碼只有一頁時，顯示頁碼會顯得很單調，且頁面不協調，此時隱藏起來會更好，只需在el-pagination 上新增hide-on-single-page 屬性即可實現，實現程式碼如下：

<el-pagination layout="prev, pager, next,jumper,total" :total="1000"  hide-on-single-page></el-pagination>

【例5.22 】改變每頁展示的條數

預設每頁展示10 條資料，如果需要更改，則只需在el-pagination 上新增page-size 屬性即可，其值是一個數字，如每頁展示20 條資料，實現程式碼如下：

<el-pagination layout="prev, pager, next" :total="1000"  :page-size="20" ></el-pagination>

【例5.23 】改變可選擇的每頁展示的條數

預設可選擇的每頁展示的條數是10,20,30,40,50,100 ，要改變的話，只需在el-pagination 上新增page-sizes 屬性，值為一個數字陣列。例如更改為展示100,200,300 ，預設每頁展示10 條，所以要指定每頁展示的條數為100 ，實現程式碼如下：

<el-pagination layout="prev, pager, next" :total="1000"  :page-sizes="[100,200,300]" ></el-pagination>

【例5.24 】分頁元件事件

分頁元件的事件用得最多的就是當前頁碼切換事件（current-change ）和每頁顯示條數變更事件（size-change ）。current-change 事件傳入當前頁碼，可以根據當前頁碼向後臺獲取當前頁碼的資料。size-change 事件傳入的引數是當前每頁顯示的條數，可以根據當前每頁顯示的條數向後臺獲取當前頁碼的資料。實現程式碼如下：

<el-pagination

      v-model:currentPage="currentPage4"

      :page-sizes="[100, 200, 300, 400]"

      :page-size="100"

      layout="total, sizes, prev, pager, next, jumper"

      :total="400"

      @size-change="handleSizeChange"

      @current-change="handleCurrentChange"

    >

    </el-pagination>

定義size-change 方法和current-change 方法：

const handleSizeChange = (val: number) => {

  console.log(`${val} items per page`)

}

const handleCurrentChange = (val: number) => {

  console.log(`current page: ${val}`)

}

至此，常用的Pagination 元件的屬性和事件方法介紹完畢。接下來透過一個例項來應用這個元件。

 

-------------------------------------------

本文節選自《Vue 3.x+Element Plus前端開發實戰》

本次內容釋出，獲得作者和出版社授權，供讀者個人非商業目的使用。