Pagination 分頁

當數據量過多時，使用分頁分解數據。

設置layout，表示需要顯示的內容，用逗號分隔，布局元素會依次顯示。prev表示上一頁，next為下一頁，pager表示頁碼列表，除此以外還提供了jumper和total，size和特殊的布局符號->，->后的元素會靠右顯示，jumper表示跳頁元素，total表示顯示頁碼總數，size用於設置每頁顯示的頁碼數量。

<div class="block">
  <span class="demonstration">頁數較少時的效果</span>
  <el-pagination
    layout="prev, pager, next"
    :total="50">
  </el-pagination>
</div>
<div class="block">
  <span class="demonstration">大於 7 頁時的效果</span>
  <el-pagination
    layout="prev, pager, next"
    :total="1000">
  </el-pagination>
</div>

 

帶有背景色的分頁

設置background屬性可以為分頁按鈕添加背景色。

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

 

小型分頁

在空間有限的情況下，可以使用簡單的小型分頁。

只需要一個small屬性，它接受一個Boolean，默認為false，設為true即可啟用。

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

 

附加功能

根據場景需要，可以添加其他功能模塊。

此例是一個完整的用例，使用了size-change和current-change事件來處理頁碼大小和當前頁變動時候觸發的事件。page-sizes接受一個整型數組，數組元素為展示的選擇每頁顯示個數的選項，[100, 200, 300, 400]表示四個選項，每頁顯示 100 個，200 個，300 個或者 400 個。

<template>
  <div class="block">
    <span class="demonstration">顯示總數</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage1"
      :page-size="100"
      layout="total, prev, pager, next"
      :total="1000">
    </el-pagination>
  </div>
  <div class="block">
    <span class="demonstration">調整每頁顯示條數</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage2"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="sizes, prev, pager, next"
      :total="1000">
    </el-pagination>
  </div>
  <div class="block">
    <span class="demonstration">直接前往</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage3"
      :page-size="100"
      layout="prev, pager, next, jumper"
      :total="1000">
    </el-pagination>
  </div>
  <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
</template>
<script>
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每頁 ${val} 條`);
      },
      handleCurrentChange(val) {
        console.log(`當前頁: ${val}`);
      }
    },
    data() {
      return {
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4
      };
    }
  }
</script>

 

Attributes

參數	說明	類型	可選值	默認值
small	是否使用小型分頁樣式	Boolean	—	false
background	是否為分頁按鈕添加背景色	Boolean	—	false
page-size	每頁顯示條目個數	Number	—	10
total	總條目數	Number	—	—
page-count	總頁數，total 和 page-count 設置任意一個就可以達到顯示頁碼的功能；如果要支持 page-sizes 的更改，則需要使用 total 屬性	Number	—	—
current-page	當前頁數，支持 .sync 修飾符	Number	—	1
layout	組件布局，子組件名用逗號分隔	String	sizes, prev, pager, next, jumper, ->, total, slot	'prev, pager, next, jumper, ->, total'
page-sizes	每頁顯示個數選擇器的選項設置	Number[]	—	[10, 20, 30, 40, 50, 100]
popper-class	每頁顯示個數選擇器的下拉框類名	string	—	—
prev-text	替代圖標顯示的上一頁文字	string	—	—
next-text	替代圖標顯示的下一頁文字	string	—	—

Events

事件名稱	說明	回調參數
size-change	pageSize 改變時會觸發	每頁條數size
current-change	currentPage 改變時會觸發	當前頁currentPage

Slot

name	說明
—	自定義內容，需要在 layout 中列出 slot