Pagination
If you have too much data to display in one page, use pagination.
Basic usage
Number of pagers
Buttons with background color
Small Pagination
Use small pagination in the case of limited space.
Hide pagination when there is only one page
When there is only one page, hide the pagination by setting the hide-on-single-page attribute.
More elements
Add more modules based on your scenario.
Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| small | whether to use small pagination | boolean | — | false |
| background | whether the buttons have a background color | boolean | — | false |
| page-size | item count of each page, supports the v-model bidirectional binding | number | — | 10 |
| default-page-size | default initial value of page size | number | - | - |
| total | total item count | number | — | — |
| page-count | total page count. Set either total or page-count and pages will be displayed; if you need page-sizes, total is required | number | — | — |
| pager-count | number of pagers. Pagination collapses when the total page count exceeds this value | number | odd number between 5 and 21 | 7 |
| current-page | current page number, supports the v-model bidirectional binding | number | — | 1 |
| default-current-page | default initial value of current-page | number | - | - |
| layout | layout of Pagination, elements separated with a comma | string | sizes / prev / pager / next / jumper / -> / total / slot | 'prev, pager, next, jumper, ->, total' |
| page-sizes | options of item count per page | number[] | — | [10, 20, 30, 40, 50, 100] |
| popper-class | custom class name for the page size Select's dropdown | string | — | — |
| prev-text | text for the prev button | string | — | — |
| next-text | text for the next button | string | — | — |
| disabled | whether Pagination is disabled | boolean | — | false |
| hide-on-single-page | whether to hide when there's only one page | boolean | — | - |
WARNING
We'll detect some deprecated usages, if your pagination don't appeared or worked as expected, please check rules below:
- You have to define one of
totalandpage-count, otherwise we can't determine count of total pages.When both defined,page-counttaken as priority. - If
current-pageis defined, you have to listencurrent-pagechange, by also define@update:current-page, otherwise pagination didn't work. - If
page-sizeis defined while page size selector displayed(sizesincluded inlayout), you have to listenpage-sizechange as well, by define@update:page-size, otherwise change of page size didn't work.
Events
| Event Name | Description | Parameters |
|---|---|---|
| size-change | triggers when page-size changes | the new page size |
| current-change | triggers when current-page changes | the new current page |
| prev-click | triggers when the prev button is clicked and current page changes | the new current page |
| next-click | triggers when the next button is clicked and current page changes | the new current page |
WARNING
Events above are not recommended(but are still supported for compatible reason), better choice is to use the two-way data binding by v-model.
Slots
| Name | Description |
|---|---|
| — | custom content. To use this, you need to declare slot in layout |