Data-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>
Data-Pagination 分頁 <!--預設情況下,當總頁數超過 7 頁時,Pagination 會折疊多餘的頁碼按鈕。通過pager-count屬性可以設定最大頁碼按鈕數。
設定background屬性可以為分頁按鈕添加背景色。-->
<el-pagination
:page-size="20"
:pager-count="11"
layout="prev, pager, next"
:total="1000">
</el-pagination>
Data-Pagination 分頁 <!--在空間有限的情況下,可以使用簡單的小型分頁。
隻需要一個small屬性,它接受一個Boolean,預設為false,設為true即可啟用。-->
<el-pagination
small
layout="prev, pager, next"
:total="50">
</el-pagination>
Data-Pagination 分頁 <!--此例是一個完整的用例,使用了size-change和current-change事件來處理頁碼大小和目前頁變動時候觸發的事件。
page-sizes接受一個整型數組,數組元素為展示的選擇每頁顯示個數的選項,[100, 200, 300, 400]表示四個選項,
每頁顯示 100 個,200 個,300 個或者
400 個。-->
<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>
<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 | 每頁顯示條目個數,支援 .sync 修飾符 | number | — | 10 |
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] |
Events
事件名稱 | 說明 | 回調參數 |
size-change | pageSize 改變時會觸發 | 每頁條數 |
current-change | currentPage 改變時會觸發 | 目前頁 |