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

NameDescriptionTypeDefault
smallwhether to use small paginationbooleanfalse
backgroundwhether the buttons have a background colorbooleanfalse
page-size / v-model:page-sizeitem count of each pagenumber
default-page-sizedefault initial value of page size, not setting is the same as setting 10number
totaltotal item countnumber
page-counttotal page count. Set either total or page-count and pages will be displayed; if you need page-sizes, total is requirednumber
pager-countnumber of pagers. Pagination collapses when the total page count exceeds this valuenumber7
current-page / v-model:current-pagecurrent page numbernumber
default-current-pagedefault initial value of current-page, not setting is the same as setting 1number
layoutlayout of Pagination, elements separated with a commastringprev, pager, next, jumper, ->, total
page-sizesoptions of item count per pageobject[10, 20, 30, 40, 50, 100]
popper-classcustom class name for the page size Select's dropdownstring''
prev-texttext for the prev buttonstring''
prev-iconicon for the prev button, has a lower priority than prev-textstring / ComponentArrowLeft
next-texttext for the next buttonstring''
next-iconicon for the next button, has a lower priority than next-textstring / ComponentArrowRight
disabledwhether Pagination is disabledbooleanfalse
teleported 2.3.13whether Pagination select dropdown is teleported to the bodybooleantrue
hide-on-single-pagewhether to hide when there's only one pagebooleanfalse

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

NameDescriptionType
size-changetriggers when page-size changesFunction
current-changetriggers when current-page changesFunction
change 2.4.4triggers when current-page or page-size changesFunction
prev-clicktriggers when the prev button is clicked and current page changesFunction
next-clicktriggers when the next button is clicked and current page changesFunction

WARNING

Events above are not recommended(but are still supported for compatible reason), better choice is to use the two-way data binding by v-model.

Slots

NameDescription
defaultcustom content. To use this, you need to declare slot in layout

Source

ComponentDocs

Contributors