Pagination 分页

分页组件用于将大量数据切分为多个页面，支持智能折叠省略号、多种变体样式和尺寸。

基础用法

通过 v-model 绑定当前页码，total 指定总页数。

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

智能折叠

总页数较多时自动折叠为省略号。boundary 控制首尾固定显示页数，around 控制当前页两侧显示页数。

boundary="1" around="1"（默认）

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

boundary="2" around="2"

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

显示首尾按钮

设置 show-first-last 显示「首页」和「末页」按钮，默认使用图标 IconChevronLeftPipe / IconChevronRightPipe。

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

也可通过 first-text 和 last-text 显示文字。

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

文字按钮

通过 prev-text 和 next-text 自定义上一步/下一步的文字内容。

<TPagination v-model="page" :total="12" prev-text="上一页" next-text="下一页" />

数据量模式

通过 total-items 和 page-size 自动计算总页数。

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

变体样式

Outline

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

Circle

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

尺寸

小尺寸 (sm)

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

大尺寸 (lg)

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

禁用态

设置 disabled 禁用所有操作。

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

跳转功能

可直接在输入框中输入页码并按回车或点击「跳转」按钮快速跳转。

jump 属性默认值为空（undefined），此时仅当总页数 > 20 时自动显示跳转框。传 true / false 可强制显示/隐藏。

自动显示（total > 20）

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

强制不显示

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

API

Props

Prop	说明	类型	默认值
v-model	当前页码	number	1
total	总页数	number	—
total-items	总数据量（与 page-size 配合计算总页数）	number	—
page-size	每页条数	number	10
boundary	首尾固定显示页数	number	1
around	当前页前后显示页数	number	1
show-first-last	显示首/末页按钮	boolean	false
prev-text	上一页文字（不传则显示图标）	string	—
next-text	下一页文字（不传则显示图标）	string	—
first-text	首页按钮文字（不传则显示图标）	string	—
last-text	末页按钮文字（不传则显示图标）	string	—
variant	变体样式	'default' | 'outline' | 'circle'	'default'
size	尺寸	'sm' | 'lg'	—
disabled	全局禁用	boolean	false
jump	跳转输入框：undefined 时自动（>20 页显示），true 强制显示，false 强制隐藏	boolean | undefined	undefined
jump-text	跳转按钮文案（i18n）	string	'跳转'
jump-placeholder	跳转输入框 placeholder（i18n）	string	'页码'

Emits

Emit	说明	参数
change	页码变化时触发	(page: number)

Slots

暂不提供插槽（纯数组驱动渲染）。