Pagination 分页
当数据量过多时，使用分页分解数据。
设计稿对应组件集 →分页器，通过属性组合多种样式：
| 设计属性 | 组件属性 | 说明 |
|---|---|---|
| 类型 · 线性 | background 不传 / false | 页码白底描边 |
| 类型 · 面性 | background | 页码灰底填充 |
| 尺寸 · 默认 | size="default" | 控件高度 32px |
| 尺寸 · 小 | size="small" | 控件高度 24px |
ts
import { createApp } from 'vue'
import { ElPagination } from '@szhn/dh-design-pc'
const app = createApp()
app.use(ElPagination)设计样式（类型 × 尺寸）
通过 background、size 切换设计稿中的四种组合；跳转区展示为「跳至 n /总页 页」。
基础用法
设置最大页码按钮数
线性 / 面性
线性为默认描边样式；传入 background 切换为面性填充样式。
小型分页
在空间有限的情况下，可以使用 size="small" 的小型分页。
当只有一页时隐藏分页
当只有一页时，通过设置 hide-on-single-page 属性来隐藏分页。
附加功能
根据场景需要，可以添加总数、每页条数、跳转等模块。
API
属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| size | 尺寸：default 32px / small 24px（设计稿「尺寸」） | enum | 'default' |
| background | 是否面性填充；false 为线性描边（设计稿「类型」） | boolean | false |
| page-size / v-model:page-size | 每页显示条目个数 | number | — |
| default-page-size | 每页默认的条目个数，不设置时默认为10 | number | — |
| total | 总条目数 | number | — |
| page-count | 总页数， total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | number | — |
| pager-count | 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠 | number | 7 |
| current-page / v-model:current-page | 当前页数 | number | — |
| default-current-page | 当前页数的默认初始值，不设置时默认为 1 | number | — |
| layout | 组件布局，子组件名用逗号分隔 | string | prev, pager, next, jumper, ->, total |
| page-sizes | 每页显示个数选择器的选项设置 | array | [10, 20, 30, 40, 50, 100] |
| append-size-to | 下拉框挂载到哪个 DOM 元素 | string | — |
| popper-class | 每页显示个数选择器的下拉框类名 | string | '' |
| popper-style | 每页显示个数选择器的下拉框样式 | string / object | — |
| prev-text | 替代图标显示的上一页文字 | string | '' |
| prev-icon | 上一页的图标， 比 prev-text 优先级更高 | string / Component | ArrowLeft |
| next-text | 替代图标显示的下一页文字 | string | '' |
| next-icon | 下一页的图标， 比 next-text 优先级更高 | string / Component | ArrowRight |
| disabled | 是否禁用分页 | boolean | false |
| teleported | 是否将下拉菜单teleport至 body | boolean | true |
| hide-on-single-page | 只有一页时是否隐藏 | boolean | false |
| small deprecated | 是否使用小型分页样式 | boolean | false |
注意
我们现在会检查一些不合理的用法，如果发现分页器未显示，可以核对是否违反以下情形：
total和page-count必须传一个，不然组件无法判断总页数；优先使用page-count;- 如果传入了
current-page，必须监听current-page变更的事件（@update:current-page），否则分页切换不起作用； - 如果传入了
page-size，且布局包含 page-size 选择器（即layout包含sizes），必须监听page-size变更的事件（@update:page-size），否则分页大小的变化将不起作用。
事件
| 名称 | 说明 | 类型 |
|---|---|---|
| size-change | page-size 改变时触发 | Function |
| current-change | current-page 改变时触发 | Function |
| change | current-page 或 page-size 更改时触发 | Function |
| prev-click | 用户点击上一页按钮改变当前页时触发 | Function |
| next-click | 用户点击下一页按钮改变当前页时触发 | Function |
注意
以上事件不推荐使用（但由于兼容的原因仍然支持，在以后的版本中将会被删除）；如果要监听 current-page 和 page-size 的改变，使用 v-model 双向绑定是个更好的选择。
插槽
| 名称 | 说明 |
|---|---|
| default | 自定义内容 设置文案，需要在 layout 中列出 slot |
设计说明
- 文案：总数为「共 {total} 项」，跳转为「跳至」+ 页码输入 +「/总页 页」
- 完整栏推荐 layout：
total, ->, sizes, prev, pager, next, jumper（->将右侧控件右对齐，总数在左） - 线性选中 / 面性选中均为品牌色实心
#075AED - 线性默认项：白底 +
#E0E0E0描边；悬停描边变为主色；禁用上一页/下一页同为白底描边 + 弱化图标（非实心灰块） - 面性默认项：灰底
#F2F2F2；箭头同步灰底方块 - 禁用选中：
#B9D5FF