Skip to content

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

AttributeDescriptionTypeExpandableDefault
v-model:page-sizeNumber of items displayed per pagenumberNo-
v-model:page-currentCurrent page numbernumberNo-
size el^2.7.6Size of the radio buttonenumNodefault
backgroundWhether to add a background color to the pagination buttonsbooleanNofalse
default-page-sizeDefault number of items per page, defaults to 10 if not setnumberNo-
totalTotal number of itemsnumberNo0
page-countTotal number of pages. Either total or page-count can be set to display page numbers. To support page-sizes, use the total attributenumberNo
pager-countSets the maximum number of page buttons. The number of page buttons, which fold when the total number exceeds this valueenumNo7
default-current-pageDefault initial value of the current page number, defaults to 1 if not setnumberNo-
layoutComponent layout, subcomponent names separated by commasenumNototal, sizes, prev, pager, next, jumper
page-sizesOptions for the number of items per page selectornumber[]No[10, 20, 50, 100]
popper-classClass name for the dropdown of the number of items per page selectorstringNo''
prev-textText displayed instead of the icon for the previous pagestringNo''
prev-iconIcon for the previous page, higher priority than prev-textenumNoArrowLeft
next-textText displayed instead of the icon for the next pagestringNo''
next-iconIcon for the next page, higher priority than next-textenumNoArrowRight
disabledWhether to disable paginationbooleanNofalse
teleportedWhether to teleport the dropdown menu to the bodybooleanNotrue
hide-on-single-pageWhether to hide pagination when there is only one pagebooleanNofalse

Events

Event NameDescriptionTypeCustomizable
update:page-sizeListens to changes in the number of items per pageFunctionNo
update:current-pageListens to changes in the current page numberFunctionNo

Released under the MIT License