Pagination

介紹使用 Pagination 分頁碼元件

Pagination 分頁碼，是用在一頁無法完整所有資訊時，切換頁面繼續從上次閱讀的地方繼續往後閱讀。常見的內容有頁碼，上下一頁、第一頁、最末頁、總共有多少項目、總共有多少頁、目前在第幾頁、前往第幾頁等功能，幫助使用者快速跳至某個頁面閱讀資料。

提示： 要在 mounted 之後觸發

範例

<bpa-pagination
  :total="totalPages"
  :current-page.sync="currentPage"
  :pager-count="pagerCount"
  :pageSize="pageSize"
  :pageSizeOptions="pageSizeOptions"
  :layout=['total_item', 'total_page', 'page_size', 'first', 'last', 'jump']
  @change:page="onChangePage"
  @change:pageSize="onChangeSize"
/>

屬性

Name	Value	Type	Default	Required	Note
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			按鈕大小

事件

Name	Parameters	Description
sync-page-param	{currentPage: number}	換頁時觸發
change:page		換頁時觸發
change:pageSize

Demo

此元件在小螢幕時，pagerCount 只顯示目前所在頁面。如果您在demo頁上只看到目前所在頁面，可以試著調整解析度或將網頁縮小等方式看到完整外觀。