Pagination 分頁(yè)

當(dāng)數(shù)據(jù)量過(guò)多時(shí)，使用分頁(yè)分解數(shù)據(jù)。

基礎(chǔ)用法

頁(yè)數(shù)較少時(shí)的效果

設(shè)置layout，表示需要顯示的內(nèi)容，用逗號(hào)分隔，布局元素會(huì)依次顯示。prev表示上一頁(yè)，next為下一頁(yè)，pager表示頁(yè)碼列表，除此以外還提供了jumper和total，size和特殊的布局符號(hào)->，->后的元素會(huì)靠右顯示，jumper表示跳頁(yè)元素，total表示總條目數(shù)，size用于設(shè)置每頁(yè)顯示的頁(yè)碼數(shù)量。

<template>
  <div class="block">
    <span class="demonstration">頁(yè)數(shù)較少時(shí)的效果</span>
    <el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
  </div>
  <div class="block">
    <span class="demonstration">大于 7 頁(yè)時(shí)的效果</span>
    <el-pagination layout="prev, pager, next" :total="1000"> </el-pagination>
  </div>
</template>

設(shè)置最大頁(yè)碼按鈕數(shù)

默認(rèn)情況下，當(dāng)總頁(yè)數(shù)超過(guò) 7 頁(yè)時(shí)，Pagination 會(huì)折疊多余的頁(yè)碼按鈕。通過(guò)pager-count屬性可以設(shè)置最大頁(yè)碼按鈕數(shù)。

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

帶有背景色的分頁(yè)

設(shè)置background屬性可以為分頁(yè)按鈕添加背景色。

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

小型分頁(yè)

在空間有限的情況下，可以使用簡(jiǎn)單的小型分頁(yè)。

只需要一個(gè)small屬性，它接受一個(gè)Boolean，默認(rèn)為false，設(shè)為true即可啟用。

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

附加功能

根據(jù)場(chǎng)景需要，可以添加其他功能模塊。

此例是一個(gè)完整的用例，使用了size-change和current-change事件來(lái)處理頁(yè)碼大小和當(dāng)前頁(yè)變動(dòng)時(shí)候觸發(fā)的事件。page-sizes接受一個(gè)整型數(shù)組，數(shù)組元素為展示的選擇每頁(yè)顯示個(gè)數(shù)的選項(xiàng)，[100, 200, 300, 400]表示四個(gè)選項(xiàng)，每頁(yè)顯示 100 個(gè)，200 個(gè)，300 個(gè)或者 400 個(gè)。

<template>
  <div class="block">
    <span class="demonstration">顯示總數(shù)</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      v-model:currentPage="currentPage1"
      :page-size="100"
      layout="total, prev, pager, next"
      :total="1000"
    >
    </el-pagination>
  </div>
  <div class="block">
    <span class="demonstration">調(diào)整每頁(yè)顯示條數(shù)</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      v-model:currentPage="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"
      v-model:currentPage="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(`每頁(yè) ${val} 條`)
      },
      handleCurrentChange(val) {
        console.log(`當(dāng)前頁(yè): ${val}`)
      },
    },
    data() {
      return {
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
      }
    },
  }
</script>

當(dāng)只有一頁(yè)時(shí)隱藏分頁(yè)

當(dāng)只有一頁(yè)時(shí)，通過(guò)設(shè)置 ?hide-on-single-page? 屬性來(lái)隱藏分頁(yè)。

  <div>
    <el-switch v-model="value"> </el-switch>
    <el-pagination
      :hide-on-single-page="value"
      :total="5"
      layout="prev, pager, next"
    >
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: false,
      }
    },
  }
</script>

Attributes

我們現(xiàn)在會(huì)檢查一些不合理的用法，如果發(fā)現(xiàn)分頁(yè)器未顯示，可以核對(duì)是否違反以下情形：

• total 和 page-count 必須傳一個(gè)，不然組件無(wú)法判斷總頁(yè)數(shù)；優(yōu)先使用 page-count;

• 如果傳入了 current-page 必須監(jiān)聽(tīng) current-page 變更的事件（onUpdate:currentPage）；否則分頁(yè)切換不起作用；

• 如果傳入了 page-size，且布局包含 page-size 選擇器（即 layout 包含 sizes），必須監(jiān)聽(tīng) page-size 變更的事件（onUpdate:pageSize），否則 page-size 切換不起作用；

Events

以上事件不推薦使用；如果要監(jiān)聽(tīng) current-page 和 page-size 的改變，使用 v-model 雙向綁定是個(gè)更好的選擇。

Slot