Pagination

If you have too much data to display in one page, use pagination.

Basic usage

Use small pagination in the case of limited space.

When there is only one page, hide the pagination by setting the hide-on-single-page attribute.

Add more modules based on your scenario.

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`	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`	7
current-page / v-model:current-page	current page number	`number`	1
default-current-page	default initial value of current-page	`number`	-
layout	layout of Pagination, elements separated with a comma	`string`	prev, pager, next, jumper, ->, total
page-sizes	options of item count per page	`array`	[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, higher priority of `prev-text`	`string` / `Component`	ArrowLeft
next-text	text for the next button	`string`	—
next-icon	icon for the next button, higher priority of `next-text`	`string` / `Component`	ArrowRight
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 total and page-count, otherwise we can't determine count of total pages.When both defined, page-count taken as priority.
If current-page is defined, you have to listen current-page change, by also define @update:current-page, otherwise pagination didn't work.
If page-size is defined while page size selector displayed(sizes included in layout), you have to listen page-size change as well, by define @update:page-size, otherwise change of page size didn't work.

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`