Pagination

A secondary encapsulation of the element-plus pagination component. Bind pagination data directly for two-way binding, simplifying event handling. The following is a basic usage example, usually used with tables or lists.

Basic Usage

Additional Features

Depending on the scenario, you can add other functional modules.

This example is a complete use case. It uses the @update:page-size and @update:current-page events to handle events triggered when the page size and current page change. page-sizes accepts an array of integers, where each element represents an option for the number of items displayed per page. [10, 20, 50, 100, 200] represents five options: 10, 20, 50, 100, or 200 items per page.

Attributes

Attribute	Description	Type	Expandable	Default
v-model:page-size	Number of items displayed per page	number	No	-
v-model:page-current	Current page number	number	No	-
size el^2.7.6	Size of the radio button	enum	No	default
background	Whether to add a background color to the pagination buttons	boolean	No	false
default-page-size	Default number of items per page, defaults to 10 if not set	number	No	-
total	Total number of items	number	No	0
page-count	Total number of pages. Either total or page-count can be set to display page numbers. To support page-sizes, use the total attribute	number	No	—
pager-count	Sets the maximum number of page buttons. The number of page buttons, which fold when the total number exceeds this value	enum	No	7
default-current-page	Default initial value of the current page number, defaults to 1 if not set	number	No	-
layout	Component layout, subcomponent names separated by commas	enum	No	total, sizes, prev, pager, next, jumper
page-sizes	Options for the number of items per page selector	number[]	No	[10, 20, 50, 100]
popper-class	Class name for the dropdown of the number of items per page selector	string	No	''
prev-text	Text displayed instead of the icon for the previous page	string	No	''
prev-icon	Icon for the previous page, higher priority than prev-text	enum	No	ArrowLeft
next-text	Text displayed instead of the icon for the next page	string	No	''
next-icon	Icon for the next page, higher priority than next-text	enum	No	ArrowRight
disabled	Whether to disable pagination	boolean	No	false
teleported	Whether to teleport the dropdown menu to the body	boolean	No	true
hide-on-single-page	Whether to hide pagination when there is only one page	boolean	No	false

Events

Event Name	Description	Type	Customizable
update:page-size	Listens to changes in the number of items per page	Function	No
update:current-page	Listens to changes in the current page number	Function	No