Pagination

Pagination splits large datasets across multiple pages, with smart ellipsis collapsing, multiple variant styles, and sizes.

Basic Usage

Bind the current page with v-model and specify the total page count via total.

<TPagination v-model="page" :total="10" />

Smart Collapse

When there are many pages, the component automatically collapses into ellipsis gaps. boundary controls how many pages are pinned at each end, and around controls how many pages appear next to the current page.

boundary="1" around="1" (default)

<TPagination v-model="page" :total="20" />

boundary="2" around="2"

<TPagination v-model="page" :total="20" boundary="2" around="2" />

Show First / Last Buttons

Set show-first-last to show "First" and "Last" buttons. By default they use IconChevronLeftPipe / IconChevronRightPipe.

<TPagination v-model="page" :total="12" show-first-last />

You can also use first-text and last-text for textual labels.

<TPagination v-model="page" :total="12" show-first-last first-text="First" last-text="Last" />

Text Labels

Customize the previous / next step text via prev-text and next-text.

<TPagination v-model="page" :total="12" prev-text="Prev" next-text="Next" />

Data Count Mode

Use total-items with page-size to calculate the total number of pages automatically.

<TPagination v-model="page" :total-items="95" :page-size="10" />

Variants

Outline

<TPagination v-model="page" :total="8" variant="outline" />

Circle

<TPagination v-model="page" :total="8" variant="circle" />

Sizes

Small (sm)

<TPagination v-model="page" :total="8" size="sm" />

Large (lg)

<TPagination v-model="page" :total="8" size="lg" />

Disabled State

Set disabled to disable all interactions.

<TPagination v-model="page" :total="10" disabled />

Jump To Page

Enter a page number in the input box and press Enter (or click the "Go" button) to jump directly.

The jump prop defaults to undefined — the input box auto-appears when the total page count exceeds 20. Pass true to force-show or false to force-hide.

Auto-show (total > 20)

<TPagination v-model="page" :total="30" />

Force-hide

<TPagination v-model="page" :total="100" :jump="false" />

API

Props

Prop	Description	Type	Default
v-model	Current page number	number	1
total	Total page count	number	—
total-items	Total number of items (used with page-size)	number	—
page-size	Items per page	number	10
boundary	Pages pinned at start / end	number	1
around	Pages shown around the current page	number	1
show-first-last	Show first / last page buttons	boolean	false
prev-text	Previous button text (shows an icon when omitted)	string	—
next-text	Next button text (shows an icon when omitted)	string	—
first-text	First page button text (shows an icon when omitted)	string	—
last-text	Last page button text (shows an icon when omitted)	string	—
variant	Visual variant	'default' | 'outline' | 'circle'	'default'
size	Button size	'sm' | 'lg'	—
disabled	Global disabled state	boolean	false
jump	Jump input: undefined = auto-show when > 20 pages, true = force-show, false = force-hide	boolean | undefined	undefined
jump-text	Jump button text (i18n friendly)	string	'跳转'
jump-placeholder	Jump input placeholder (i18n friendly)	string	'页码'

Emits

Emit	Description	Parameters
change	Fires when the page changes	(page: number)

Slots

Not applicable (purely array-driven rendering).