Pagination 分页
当数据量过多时，使用分页分解数据。
基础用法
设置最大页码按钮数
带有背景色的分页
小型分页
在空间有限的情况下，可以使用简单的小型分页。
当只有一页时隐藏分页
当只有一页时，通过设置 hide-on-single-page 属性来隐藏分页。
附加功能
根据场景需要，可以添加其他功能模块。
API
属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| page-size / v-model:page-size | 每页显示条目个数 | number | — |
| total | 总条目数 | number | — |
| page-count | 总页数， total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | number | — |
| pager-count | 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠 | number 5 | 7 | 9 | 11 | 13 | 15 | 17 | 19 | 21 | 7 |
| default-current-page | 当前页数的默认初始值，不设置时默认为 1 | number | — |
| prev-text | 替代图标显示的上一页文字 | string | '' |
| next-text | 替代图标显示的下一页文字 | string | '' |
事件
| 名称 | 说明 | 类型 |
|---|---|---|
| size-change | page-size 改变时触发 | Function (value: number) => void |
| current-change | current-page 改变时触发 | Function (value: number) => void |
| change | current-page 或 page-size 更改时触发 | Function (currentPage: number, pageSize: number) => void |
| prev-click | 用户点击上一页按钮改变当前页时触发 | Function (value: number) => void |
| next-click | 用户点击下一页按钮改变当前页时触发 | Function (value: number) => void |
插槽
| 名称 | 说明 |
|---|---|
| default | 自定义内容 设置文案，需要在 layout 中列出 slot |