开发预览更新于 2026-05-10

Pagination 分页

数字按钮 + 上下页 + 跳转输入框，自动计算页码省略号，3 档尺寸。

基础用法

传 total（总条数）和 pageSize（每页条数），组件自动算页数。v-model (Vue) / value + onChange (React) 绑定当前页（1-based）。

<CfPagination v-model="page" :total="80" :page-size="10" />

<CfPagination value={page} onChange={setPage} total={80} pageSize={10} />

显示总数 / 跳转输入

showTotal 在左侧加「共 N 条」文案；showJumper 在右侧加「跳至 N 页」输入框（按 Enter 或离焦提交）。两个开关相互独立。

<CfPagination
v-model="page"
:total="200"
:page-size="10"
show-total
show-jumper
/>

<CfPagination
value={page}
onChange={setPage}
total={200}
pageSize={10}
showTotal
showJumper
/>

邻接页码数量

siblingCount 控制当前页两侧显示几个相邻页码 — 默认 1。结合首尾页一起最多渲染 siblingCount * 2 + 5 个按钮，超出会插入省略号 …。

siblingCount = 0

siblingCount = 1（默认）

siblingCount = 2

<CfPagination v-model="a" :total="500" :page-size="10" :sibling-count="0" />
<CfPagination v-model="b" :total="500" :page-size="10" :sibling-count="1" />
<CfPagination v-model="c" :total="500" :page-size="10" :sibling-count="2" />

<CfPagination value={a} onChange={setA} total={500} pageSize={10} siblingCount={0} />
<CfPagination value={b} onChange={setB} total={500} pageSize={10} siblingCount={1} />
<CfPagination value={c} onChange={setC} total={500} pageSize={10} siblingCount={2} />

三档尺寸

size 与 Button / Input 保持一致 — sm 紧凑（表格内分页常用）/ md 默认 / lg 大号。

<CfPagination v-model="a" :total="120" :page-size="10" size="sm" />
<CfPagination v-model="b" :total="120" :page-size="10" size="md" />
<CfPagination v-model="c" :total="120" :page-size="10" size="lg" />

<CfPagination value={a} onChange={setA} total={120} pageSize={10} size="sm" />
<CfPagination value={b} onChange={setB} total={120} pageSize={10} size="md" />
<CfPagination value={c} onChange={setC} total={120} pageSize={10} size="lg" />

API

Prop	类型	默认值	说明
`modelValue` (Vue) / `value` (React)	`number`	`1`	当前页（1-based）
`total`	`number`	`0`	总条数
`pageSize`	`number`	`10`	每页条数
`siblingCount`	`number`	`1`	当前页两侧显示几个相邻页码
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	按钮高度
`showNav`	`boolean`	`true`	显示上一页 / 下一页箭头
`showJumper`	`boolean`	`false`	显示跳转输入
`showTotal`	`boolean`	`false`	显示「共 N 条」文案

事件：

Vue：@update:modelValue —— v-model 自动监听
React：onChange(page: number)