介紹使用 Pagination 分頁碼元件
Pagination 分頁碼,是用在一頁無法完整所有資訊時,切換頁面繼續從上次閱讀的地方繼續往後閱讀。常見的內容有頁碼,上下一頁、第一頁、最末頁、總共有多少項目、總共有多少頁、目前在第幾頁、前往第幾頁等功能,幫助使用者快速跳至某個頁面閱讀資料。
提示: 要在 mounted 之後觸發
total
Number
總共多少項目
currentPage
Number
設定目前所在頁面
pagerCount
Number
5
設定顯示多少個分頁碼
pageSizeOption
Array
[ { label: '10', value: 10 }, { label: '20', value: 20 }, { label: '50', value: 50 }, { label: '100', value: 100 }, ]
可以設定每頁顯示多少個項目的下拉式選單
pageSize
Number
10
每頁多少個項目
layout
Array
['total_item', 'total_page', 'page_size', 'first', 'last', 'jump']
設定要顯示的元件
size
String
按鈕大小
sync-page-param
{currentPage: number}
換頁時觸發
change:page
換頁時觸發
change:pageSize
此元件在小螢幕時,pagerCount 只顯示目前所在頁面。如果您在demo頁上只看到目前所在頁面,可以試著調整解析度或將網頁縮小等方式看到完整外觀。