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 deprecated	whether to use small pagination	`boolean`	false
size 2.7.6	pagination size	`enum`	'default'
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 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.

Events

Name	Description	Type
size-change	triggers when `page-size` changes	`Function`
current-change	triggers when `current-page` changes	`Function`
change 2.4.4	triggers when `current-page` or `page-size` 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`