Pagination - Vant 4

Pagination

Intro

When the amount of data is too much, use pagination to separate the data, and load only one page at a time.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from'vue'; import { Pagination } from'vant'; const app = createApp(); app.use(Pagination);

Usage

Basic Usage

import { ref } from'vue'; exportdefault { setup() { const currentPage = ref(1); return { currentPage }; }, };

Simple mode

Show ellipses

Custom Button

API

Props

Attribute	Description	Type	Default
v-model	Current page number	number	-
mode	Mode, can be set to simple``multi	string	multi
prev-text	Previous text	string	Previous
next-text	Next text	string	Next
total-items	Total items	*number	string*
items-per-page	Item number per page	*number	string*
page-count	The total number of pages, if not set, will be calculated based on total-items and items-per-page	*number	string*
show-page-size	Count of page size to show	*number	string*
force-ellipses	Whether to show ellipses	boolean	false
show-prev-button v4.2.1	Whether to show prev button	boolean	true
show-next-button v4.2.1	Whether to show next button	boolean	true

Events

Event	Description	Arguments
change	Emitted when current page changed	-

Slots

Name	Description	SlotProps
page	Custom pagination item	{ number: number, text: string, active: boolean }
prev-text	Custom prev text	-
next-text	Custom next text	-

Types

The component exports the following type definitions:

importtype { PaginationMode, PaginationProps } from'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-pagination-height	40px	-
--van-pagination-font-size	var(--van-font-size-md)	-
--van-pagination-item-width	36px	-
--van-pagination-item-default-color	var(--van-primary-color)	-
--van-pagination-item-disabled-color	var(--van-gray-7)	-
--van-pagination-item-disabled-background	var(--van-background)	-
--van-pagination-background	var(--van-background-2)	-
--van-pagination-desc-color	var(--van-gray-7)	-
--van-pagination-disabled-opacity	var(--van-disabled-opacity)	-