Appearance
- default
- chenghua
- shijingshan
- sybz
- gulou
无数据
Appearance
s-pagination 基于 Element Plus Pagination 封装,根据 total / pageSize 自动计算总页数,并支持每页条数选择、页码切换、单页隐藏、手动输入回车跳页、主题样式和窄容器横向滚动。
<s-pagination v-model:current-page="page" :total="100" :page-size="10" @change="handleChange" />切换主题查看分页组件样式。基础用法:通过顶部选项切换主题。theme 可选值 default / chenghua / shijingshan / sybz / gulou,默认值 default。
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
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) |