---
id: "pagination"
title: "分页与边界状态"
category: "列表工具"
document_type: "component-specification"
spec_status: "local-current-draft"
element_ui: "2.15.6"
vue: "2.6.14"
page: "../index.html#spec-pagination"
source_data: "../component-data.json"
official_components: ["pagination"]
template_components: ["el-pagination"]
scenario_count: 9
verification: "scenario-checklist-not-full-test-pass"
---

# 分页与边界状态

专题 `pagination` · 列表工具 · Element UI 2.15.6

## 适用范围与组件映射

公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。

官方条目映射：`pagination`。

本页模板直接使用的 Element UI 标签：`el-pagination`。

## 通用基线

- 组件库：Element UI **2.15.6**；运行样例 Vue **2.6.14**。
- 系统中文字体：macOS 优先苹方，Windows 通常微软雅黑；工程顺序固定为 `"PingFang SC", "Microsoft YaHei", sans-serif`。不要求安装或加载网络字体，兼容回退不是另一套可选样式。
- 后续仅采用经验证且固定版本的兼容 Element UI 2.x；Element Plus 属于独立迁移路线。
- 正文、数据值、输入及已选值：`14px / 400 / 21px`，`#303133`。
- 表头及组件分组标题：`14px / 600 / 21px`；弹窗标题：`16px / 600 / 24px`，均使用 `#303133`。
- 辅助说明：`12px / 400 / 18px`，`#595959`；错误、链接、状态、禁用与占位按各自语义处理。
- 适用组件的默认尺寸为 `small / 32px`；不得将这一高度机械应用于表格、文本域、浮层等全部组件。
- 规范正文与场景说明使用 `14px / 400 / 24px`、`#303133`，不降成灰蓝小字。
- 筛选文本输入占位统一“请输入”；未选择下拉统一“请选择”；默认全部的下拉显示“全部”。字段标签保留业务含义；日期保留开始/结束语义。
- 次级文字操作（查看更多、编辑、详情、数据中心、更多）：`12px / 400 / 18px`，`#3377BB`；保留点击热区。
- 本规范库的深色目录、蓝色展示区属于文档排版，不是业务组件颜色或业务导航规范。

## 本页用法与分类

默认用法：常规业务列表优先使用“完整分页”：总条数、每页条数、翻页与页码跳转齐全，采用普通页码外观和常规尺寸。

| 区分什么 | 本页内容 | 选用或触发条件 |
| --- | --- | --- |
| 功能配置 | 完整分页或仅保留翻页 | 主列表优先完整配置；嵌入弹窗等空间有限且不需调整条数/跳页时，才按需精简。 |
| 外观样式 | 普通页码、带背景页码 | 普通页码为默认；背景示例仅用于外观对照，新页面不能单独换肤，采用前先明确统一范围。 |
| 尺寸 | 常规、紧凑 | 常规为默认；紧凑仅用于受限容器，页码功能和选中语义保持一致。 |
| 数据边界 | 空数据、单页、首尾页 | 随总数和当前页自动出现，不属于可自由挑选的样式。 |

使用边界：功能配置、外观和尺寸是不同维度，可以按条件组合；本页不是三套可任选的分页方案，5/10条是演示数据配置。

## 组件规则

- **PAGINATION-R01**：由总条数、每页条数选择、上一页、页码、下一页和页码跳转组成；高度基线统一。上一页和下一页在边界禁用。
- **PAGINATION-R02**：总数、当前页与可见记录一致；修改每页条数或记录数减少后重算并约束到有效页，不能有数据却停在越界空页。筛选条件变化按宿主规则回第一页。Element 默认跳页会将越界值约束至首尾页；需显式报错的业务应在宿主层补校验。
- **PAGINATION-R03**：本例共 26 条，支持每页 5 / 10 条；当前页、每页条数与总数由分页控件直接表达，不在下方重复显示辅助统计。切换仅操作本地样例，业务是否保留已选项由宿主明确。
- **PAGINATION-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。
- **PAGINATION-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。
- **PAGINATION-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。
- **PAGINATION-R07**：页码、前后翻页图标与跳页数字始终在各自点击框中居中；默认、悬停、当前页、禁用及省略跳转均不移动内容。表格正文左对齐规则不得命中分页 li.number；页码外框尺寸不因选中加边框发生变化。
- **PAGINATION-R08**：【普通页与箭头】白底、正文深灰、边框灰；可执行页码及箭头悬停用浅灰背景和操作蓝，数字与图标始终居中。
- **PAGINATION-R09**：【当前页】当前页白底、主题蓝边框、操作蓝数字；选中不改变内距、字重和对齐，不绘制对勾或半选横线。
- **PAGINATION-R10**：【边界禁用】首页上一页、末页下一页及真实不可执行入口使用禁用灰并阻止触发；空数据仍明确显示总数。
- **PAGINATION-R11**：【键盘与快速翻页】可执行页码、箭头和省略号快速翻页入口使用操作蓝键盘焦点；按下不套主按钮蓝底或下移效果。
- **PAGINATION-R12**：【页容量与跳页】页容量和跳页值保持正文深灰、白底、边框灰，聚焦仅原边框主题蓝；跳页数字居中，非法值按分页规则纠正，不杜撰表单红框错误态。
- **PAGINATION-R13**：【组件边界】分页没有复选、半选、错误触发框或已选禁用勾选；当前页、键盘定位、翻页禁用及跳页输入分别定义。

## 场景与验收清单

以下为需核对的场景组；`[ ]` 不代表已经测试通过。

- [ ] **PAGINATION-S01**：分别核对功能配置（总数、条数选择、翻页、跳页）、外观（普通/背景）和尺寸（常规/紧凑）。主列表优先完整配置、普通外观与常规尺寸；边界状态按总数和当前页自动变化。
- [ ] **PAGINATION-S02**：空数据、单页、末页、总数减少、切换每页条数与跳页越界；未读筛选下阅读末页最后一条后，页码回到最后有效页，当前筛选数量同步。
- [ ] **PAGINATION-S03**：服务端分页失败保留上下文；已选状态是否跨页由宿主明确
- [ ] **PAGINATION-S04**：本页核对当前页、可用页悬停、键盘焦点和首页/末页箭头禁用；当前页与悬停叠加仍保持当前页标识。页码跳转采用页码约束，不套业务输入错误红框或半选状态。
- [ ] **PAGINATION-S05**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和内部文字节点，不能只检查父元素。
- [ ] **PAGINATION-S06**：检查页码切换、首尾禁用和跳页越界约束；基础分页不提供表单错误红框。若业务要求显式跳页报错，由宿主单独补校验与提示，不能把页码当前态当作输入错误态。
- [ ] **PAGINATION-S07**：逐项点选1–6；检查当前页数字与边框水平/垂直居中；首末页箭头、省略跳转、页容量和跳页输入；切换后整体不跳动。
- [ ] **PAGINATION-S08**：切换页码或每页条数后，保留控件自身选中和禁用反馈，不新增重复的当前页、每页条数或展示范围统计。
- [ ] **PAGINATION-S09**：当前页码和省略号：Tab（制表键）可到达，Enter（回车键）或空格键执行；当前页标识 aria-current="page" 与选中页同步；禁用入口及隐藏专题不进入键盘导航，末页说明仅指初始状态。

### 专题验收重点

鼠标点击或键盘确认第N页后，当前页必须为N且只翻页一次；说明文字不触发翻页。核对首尾禁用、修改条数、非法跳页及最后一页剩余数量。

## 当前示例模板

以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。

```html
<section class="specimen-block" id="pagination-section-1">
<div class="specimen-heading">
<h4>
<span class="section-number">01</span>功能配置 · 完整分页（默认）</h4>
<span>主列表优先；总数、条数选择、翻页与跳转齐全</span>
</div>
<div class="specimen-stage">
<el-pagination @size-change="page=1" :current-page.sync="page" :page-size.sync="pageSize" :page-sizes="[5,10]" layout="total, sizes, prev, pager, next, jumper" :total="26">
</el-pagination>
</div>
</section>
<section class="specimen-block" id="pagination-section-2">
<div class="specimen-heading">
<h4>
<span class="section-number">02</span>数据边界 · 自动变化</h4>
<span>由总数与当前页决定，不是可选外观</span>
</div>
<div class="specimen-stage">
<div class="pagination-states">
<div class="pagination-example">
<span>空数据 · 0 条</span>
<el-pagination layout="total, prev, pager, next" :total="0">
</el-pagination>
</div>
<div class="pagination-example">
<span>单页 · 5 条</span>
<el-pagination layout="total, prev, pager, next" :total="5">
</el-pagination>
</div>
<div class="pagination-example">
<span>末页初始样例 · 可继续翻页</span>
<el-pagination layout="prev, pager, next" :total="26" :page-size="5" :current-page="6">
</el-pagination>
</div>
</div>
</div>
</section>
<section class="specimen-block" id="pagination-section-3">
<div class="specimen-heading">
<h4>
<span class="section-number">03</span>外观对照 · 普通与背景</h4>
<span>同为常规尺寸；外观不改变翻页功能</span>
</div>
<div class="specimen-stage">
<div class="pagination-states">
<div class="pagination-example">
<span>普通页码 · 默认</span>
<el-pagination layout="prev, pager, next" :total="100">
</el-pagination>
</div>
<div class="pagination-example">
<span>带背景页码 · 能力对照</span>
<el-pagination background layout="prev, pager, next" :total="100">
</el-pagination>
</div>
</div>
<p class="help">背景外观不增加功能；业务采用前需明确统一范围，不在单个新页面自行换肤。</p>
</div>
</section>
<section class="specimen-block" id="pagination-section-4">
<div class="specimen-heading">
<h4>
<span class="section-number">04</span>尺寸对照 · 常规与紧凑</h4>
<span>这里只比较尺寸，功能与外观相同</span>
</div>
<div class="specimen-stage">
<div class="pagination-states">
<div class="pagination-example">
<span>常规尺寸 · 默认</span>
<el-pagination layout="prev, pager, next" :total="100">
</el-pagination>
</div>
<div class="pagination-example">
<span>紧凑尺寸 · 受限容器</span>
<el-pagination small layout="prev, pager, next" :total="100">
</el-pagination>
</div>
</div>
<p class="help">紧凑尺寸仅在容器空间受限时采用；不会自动取消总数、每页条数或跳页功能。</p>
</div>
</section>
```

## 交付与使用边界

- 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。
- 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。
- 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。

## 来源与关联

- 来源线索：历史样板规范 14 / 63。
- [打开本专题页面](../index.html#spec-pagination)
- [通用基线](FOUNDATIONS.md)
- [规范总索引](README.md)
- [结构化规范数据](../component-data.json)（记录 id：`pagination`）
- [原始历史样板](../original-20260621.html)
- [历史规范条目](../spec-notes.json)

## 本组件颜色状态表

| 状态 / 条件 | 统一规则 |
| --- | --- |
| 普通页与箭头 | 白底、正文深灰、边框灰；可执行页码及箭头悬停用浅灰背景和操作蓝，数字与图标始终居中。 |
| 当前页 | 当前页白底、主题蓝边框、操作蓝数字；选中不改变内距、字重和对齐，不绘制对勾或半选横线。 |
| 边界禁用 | 首页上一页、末页下一页及真实不可执行入口使用禁用灰并阻止触发；空数据仍明确显示总数。 |
| 键盘与快速翻页 | 可执行页码、箭头和省略号快速翻页入口使用操作蓝键盘焦点；按下不套主按钮蓝底或下移效果。 |
| 页容量与跳页 | 页容量和跳页值保持正文深灰、白底、边框灰，聚焦仅原边框主题蓝；跳页数字居中，非法值按分页规则纠正，不杜撰表单红框错误态。 |

分页没有复选、半选、错误触发框或已选禁用勾选；当前页、键盘定位、翻页禁用及跳页输入分别定义。

[公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css)

## 业务落地场景

- [会员列表 · 会员列表底部分页](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md)
- [存款记录 · 存款列表底部分页](../../showcase/index.html#deposits) · [场景文档](../../showcase/docs/deposits.md)
- [取款审核 · 取款审核列表底部分页](../../showcase/index.html#withdrawals) · [场景文档](../../showcase/docs/withdrawals.md)
- [账户调整审核 · 账户调整列表底部分页](../../showcase/index.html#account-audit) · [场景文档](../../showcase/docs/account-audit.md)
- [活动管理 · 活动列表底部分页](../../showcase/index.html#campaigns) · [场景文档](../../showcase/docs/campaigns.md)
- [广告管理 · 广告列表底部分页](../../showcase/index.html#adverts) · [场景文档](../../showcase/docs/adverts.md)
- [公告管理 · 公告列表底部分页](../../showcase/index.html#notifications) · [场景文档](../../showcase/docs/notifications.md)
- [通知管理 · 通知列表底部分页](../../showcase/index.html#site-messages) · [场景文档](../../showcase/docs/site-messages.md)
- [推广报表 · 日报 · 报表底部分页](../../showcase/index.html#reports) · [场景文档](../../showcase/docs/reports.md)
- [推广报表 · 代理报表底部分页](../../showcase/index.html#agents) · [场景文档](../../showcase/docs/agents.md)
- [操作日志 · 日志列表底部分页](../../showcase/index.html#logs) · [场景文档](../../showcase/docs/logs.md)
- [运营总览 · 总览数据表分页](../../showcase/index.html#overview) · [场景文档](../../showcase/docs/overview.md)
- [客服工单管理 · 工单列表底部分页](../../showcase/index.html#tickets) · [场景文档](../../showcase/docs/tickets.md)

[竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md)