1. Pagination分頁

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

1.2. Attributes

參數	說明	類型	可選值	默認值
small	是否使用小型分頁樣式	boolean	無	false
background	是否為分頁按鈕添加背景色	boolean	無	false
page-size	每頁顯示條目個數, 支持.sync修飾符	number	無	10
total	總條目數	number	無	無
page-count	總頁數, total和page-count設置任意一個就可以達到顯示頁碼的功能; 如果要支持page-sizes的更改, 則需要使用total屬性	number	無	無
pager-count	頁碼按鈕的數量, 當總頁數超過該值時會折疊	number	大于等于5且小于等于21的奇數	7
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	無	無
disabled	是否禁用	boolean	無	false
hide-on-single-page	只有一頁時是否隱藏	boolean	無	無

1.3. Events

事件名稱	說明	回調參數
size-change	pageSize改變時會觸發	每頁條數
current-change	currentPage改變時會觸發	當前頁
prev-click	用戶點擊上一頁按鈕改變當前頁后觸發	當前頁
next-click	用戶點擊下一頁按鈕改變當前頁后觸發	當前頁

1.4. Slot

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

2. Pagination分頁例子

2.1. 使用腳手架新建一個名為element-ui-pagination的前端項目, 同時安裝Element插件。

2.2. 在components在新建Pagination.vue?

<template><div><h1>基礎用法</h1><h4>total總條目數。page-size每頁顯示條目個數, 默認是10。current-page當前頁數。hide-on-single-page只有一頁時是否隱藏。</h4><div class="block"><span>頁數較少時的效果</span><el-pagination :total="50"></el-pagination></div><div class="block"><span>大于7頁時的效果</span><el-pagination :total="1000" :page-size="100" :current-page="2" hide-on-single-page></el-pagination></div><h1>設置最大頁碼按鈕數</h1><h4>默認情況下, 當總頁數超過7頁時, Pagination會折疊多余的頁碼按鈕。通過pager-count屬性可以設置最大頁碼按鈕數。</h4><el-pagination :pager-count="11" :total="1000" :current-page.sync="curPage"></el-pagination><h1>帶有背景色的分頁</h1><h4>設置background屬性可以為分頁按鈕添加背景色。prev-text替代圖標顯示的上一頁文字。next-text替代圖標顯示的下一頁文字。</h4><el-pagination background :total="1000" prev-text="上一頁" next-text="下一頁"></el-pagination><h1>小型分頁</h1><h4>在空間有限的情況下, 可以使用簡單的小型分頁。只需要一個small屬性, 它接受一個Boolean, 默認為false, 設為true即可啟用。</h4><h4>size-change事件, 當pageSize改變時會觸發。current-change事件, 當currentPage改變時會觸發。</h4><el-pagination small :total="50" @size-change="hdlSizCha" @current-change="hdlCurCha"></el-pagination><h1>布局組件</h1><h4>page-sizes每頁顯示個數選擇器的選項設置。</h4><h4>設置layout, 表示需要顯示的內容, 用逗號分隔, 布局元素會依次顯示。prev表示上一頁, next為下一頁, pager表示頁碼列表, 特殊的布局符號->后的元素會靠右顯示, jumper表示跳頁元素, total表示總條目數, size用于設置每頁顯示的頁碼數量。</h4><el-pagination :total="400" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"></el-pagination></div> </template><script> export default {methods: {hdlSizCha (val) {console.log(`每頁 ${val} 條`)},hdlCurCha (val) {console.log(`當前頁: ${val}`)}},data () {return {curPage: 5}} } </script>

2.3. 訪問http://localhost:8080/#/Pagination

總結

以上是生活随笔為你收集整理的026_Pagination分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。