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.
API
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| small | whether to use small pagination | boolean | false |
| background | whether the buttons have a background color | boolean | false |
| page-size / v-model:page-size | item count of each page | number | — |
| default-page-size | default initial value of page size, not setting is the same as setting 10 | 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 | 7 |
| current-page / v-model:current-page | current page number | number | — |
| default-current-page | default initial value of current-page, not setting is the same as setting 1 | number | — |
| layout | layout of Pagination, elements separated with a comma | string | prev, pager, next, jumper, ->, total |
| page-sizes | options of item count per page | object | [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 | '' |
| prev-icon | icon for the prev button, has a lower priority than prev-text | string / Component | ArrowLeft |
| next-text | text for the next button | string | '' |
| next-icon | icon for the next button, has a lower priority than next-text | string / Component | ArrowRight |
| disabled | whether Pagination is disabled | boolean | false |
| teleported 2.3.13 | whether Pagination select dropdown is teleported to the body | boolean | true |
| hide-on-single-page | whether to hide when there's only one page | boolean | false |
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
| Name | Description | Type |
|---|---|---|
| size-change | triggers when page-size changes | Function |
| current-change | triggers when current-page changes | Function |
| prev-click | triggers when the prev button is clicked and current page changes | Function |
| next-click | triggers when the next button is clicked and current page changes | Function |
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 |
|---|---|
| default | custom content. To use this, you need to declare slot in layout |