Uses pagination to split data when the amount of data is too large.

Attributes

Parameter	Description	Type	Optional Values	Default
small	Whether to use compact pagination style	boolean	—	false
background	Whether to add a background color to pagination buttons	boolean	—	false
page-size	Number of items displayed per page, supports the .sync modifier	number	—	10
total	Total number of items	number	—	—
page-count	Total number of pages. Setting either total or page-count is enough to display page numbers; to support changing page sizes, use total	Number	—	—
pager-count	Number of page number buttons. It will collapse when total page count exceeds this value	number	odd number between 5 and 21	7
current-page	Current page number, supports the .sync modifier	number	—	1
layout	Component layout, separated by commas	String	sizes, prev, pager, next, jumper, ->, total, slot	'prev, pager, next, jumper, ->, total'
page-sizes	Options for the items-per-page selector	number[]	—	[10, 20, 30, 40, 50, 100]
popper-class	Dropdown class name for the items-per-page selector	string	—	—
prev-text	Text shown instead of the previous-page icon	string	—	—
next-text	Text shown instead of the next-page icon	string	—	—
disabled	Whether disabled	boolean	—	false
hide-on-single-page	Whether to hide when there is only one page	boolean	—	-

Events

Event Name	Description	Callback Parameters
size-change	Triggered when pageSize changes	Items per page
current-change	Triggered when currentPage changes	Current page
prev-click	Triggered after user clicks the previous-page button	Current page
next-click	Triggered after user clicks the next-page button	Current page

Slot

name	Description
—	Custom content, and slot must be listed in layout

Basic Usage

Set Maximum Number of Pager Buttons

Pagination with Background

Compact Pagination

Additional Features

Hide Pagination When There Is Only One Page