3 / 10

PageVariantpagescountcompactdotsnoneSizesmmd

<Pagination
  :page="3"
  variant="pages"
  size="md"
/>

Pagination Props

Name	Type	Default	Description
page	number	1	Current page, starting at 1.
pageSize	number	10	Items per page.
total	number	0	Total number of items.
totalItems	number	—	Total number of items, the original name for total. Wins over total and totalPages when both are set.
label	string	Pagination / 分页	Accessible name of the navigation landmark.
showSizeChanger	boolean	false	Shows the page-size selector.
pageSizeOptions	number[]	[10, 20, 50, 100]	Page-size choices.
showTotal	boolean	false	Shows the total count.
isDisabled	boolean	false	Disables the control.
disabled	boolean	false	Older name of isDisabled. Either one disables the control.
prevLabel	string	Previous / 上一页	Previous-page label. English by default; Chinese when zh-CN is provided.
nextLabel	string	Next / 下一页	Next-page label. English by default; Chinese when zh-CN is provided.
pageSizeLabel	string	Per page / 每页	Label for the page-size selector. English by default; Chinese when zh-CN is provided.
variant	'pages' | 'count' | 'compact' | 'dots' | 'input' | 'none'	'pages'	Middle of the control. input is an editable page field.
siblingCount	number	1	How many page buttons sit on each side of the current page. Narrow containers drop another step.
step	number	1	How many pages previous and next move.
hasMore	boolean	—	Whether another page exists when the total is unknown. A total above 0 wins.
pageLabel	string	Page / 页	Noun in front of the input field.
hasFirstLast	boolean	input when the page count is known	Shows buttons that jump to the first and last page.
changeAction	(page: number) => void | Promise<void>	—	Runs after the page is committed. The control stays busy until it settles, and a failure does not roll the page back.

Pagination events

Name	Payload	Description
update:page	page: number	Emitted when the page changes.
update:pageSize	pageSize: number	Emitted when the page size changes.
pageSizeChange	pageSize: number	Emitted when the page size changes, before the page returns to the first one.
change	page: number, pageSize: number	Emitted when the page or page size changes.

Pagination slots

Name	Props	Description
total	{ total, from, to }	Custom total label.