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"
/>屬性
| 名稱 | Value | Type | Default Value | Required | 描述 |
|---|---|---|---|---|---|
| size | small large | String | 按鈕大小 | ||
| total | Number | ✔️ | 總共多少項目 | ||
| currentPage | Number | ✔️ | 目前頁面 | ||
| pageCount | Number | 5 | 顯示多少個分頁碼 | ||
| pageSizeOptions | {label: string; value: number}[] | 10, 20, 50, 100 | 每頁顯示多少項目 | ||
| pageSize | Number | 10 | 每頁多少項目，與pageSizeOptions 有關聯 | ||
| layout | Array<‘total_item’, ‘total_page’, ‘page_size’, ‘first’, ‘last’, ‘jump’> | [‘total_item’, ‘total_page’, ‘page_size’, ‘first’, ‘last’, ‘jump’] | 選擇欲出現的功能 | ||
| v-slot:first-page-text | String | ⇤ | 第一頁 | ||
| v-slot:prev-page-text | String | ⇠ | 上一頁 | ||
| v-slot:next-page-text | String | ⇢ | 下一頁 | ||
| v-slot:last-page-text | String | ⇥ | 最後一頁 |
事件
| 名稱 | Parameters | 描述 |
|---|---|---|
| sync-page-param | {currentPage: number} | 換頁時觸發 |
| change:page | 換頁時觸發 | |
| change:pageSize |