Appearance
Pagination 分页组件
s-pagination 基于 Element Plus Pagination 封装,根据 total / pageSize 自动计算总页数,并支持每页条数选择、页码切换、单页隐藏、手动输入回车跳页、主题样式和窄容器横向滚动。
Hidden Title
基础用法:
<s-pagination v-model:current-page="page" :total="100" :page-size="10" @change="handleChange" />属性事件插槽简介
基础用法(currentPage 默认值:1,total 默认值:0,pageSize 默认值:10)
主题(theme 默认值:default)
手动输入回车跳页(showJumper 默认值:true)
超宽滚动
仅显示页码(showTotal、showJumper、showSizes 默认值:true)
每页条数(pageSize 默认值:10,pageSizes 默认值:[10, 20, 30, 50])
单页隐藏(hideOnSinglePage 默认值:false)
sybz 主题(theme 默认值:default)
设置 theme="sybz" 使用思云博智配色。theme 可选 default / chenghua / shijingshan / sybz,默认值为 default。品牌蓝 #4876EF,AI 辅助绿 #00D3AB。
属性
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
currentPage | 当前页码,支持 v-model:current-page | number | 1 到总页数 | 1 |
total | 数据总条数 | number | 非负整数 | 0 |
pageSize | 每页条数,总页数按照 Math.ceil(total / pageSize) 自动计算 | number | 正整数 | 10 |
pageSizes | 每页条数选择器的选项 | number[] | 正整数数组 | [10, 20, 30, 50] |
pagerCount | 页码按钮数量 | number | Element Plus 支持的奇数 | 7 |
theme | 主题样式 | string | default / chenghua / shijingshan / sybz | default |
background | 是否显示分页按钮背景 | boolean | true / false | true |
disabled | 是否禁用分页和跳页输入 | boolean | true / false | false |
showTotal | 是否显示总条数 | boolean | true / false | true |
showJumper | 是否显示回车跳页输入框 | boolean | true / false | true |
showSizes | 是否显示“X 条/页”选择器 | boolean | true / false | true |
hideOnSinglePage | 只有一页时是否隐藏整个分页器 | boolean | true / false | false |
totalText | 总条数前缀文字 | string | 任意文本 | 共 |
jumpText | 跳页输入框前缀文字 | string | 任意文本 | 跳至 |
pageText | 跳页输入框后缀文字 | string | 任意文本 | 页 |
size | 分页及输入框尺寸 | string | small / default / large | default |
其他属性会透传给内部 el-pagination,但 pageCount 由 total / pageSize 自动计算;内部布局会根据 showSizes 自动加入或移除每页条数选择器,手动跳页由 s-pagination 统一提供。
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
update:currentPage | 当前页码更新,用于 v-model:current-page | (page) |
update:pageSize | 每页条数更新,用于 v-model:page-size | (pageSize) |
change | 点击页码、上一页、下一页或回车跳页时触发 | (page) |
size-change | 每页条数发生变化时触发 | (pageSize) |
jump | 在手动输入框按回车后触发 | (page) |
prev-click | 点击上一页时触发 | (page) |
next-click | 点击下一页时触发 | (page) |