Skip to content
On this page

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-pagenumber1 到总页数1
total数据总条数number非负整数0
pageSize每页条数,总页数按照 Math.ceil(total / pageSize) 自动计算number正整数10
pageSizes每页条数选择器的选项number[]正整数数组[10, 20, 30, 50]
pagerCount页码按钮数量numberElement Plus 支持的奇数7
theme主题样式stringdefault / chenghua / shijingshan / sybzdefault
background是否显示分页按钮背景booleantrue / falsetrue
disabled是否禁用分页和跳页输入booleantrue / falsefalse
showTotal是否显示总条数booleantrue / falsetrue
showJumper是否显示回车跳页输入框booleantrue / falsetrue
showSizes是否显示“X 条/页”选择器booleantrue / falsetrue
hideOnSinglePage只有一页时是否隐藏整个分页器booleantrue / falsefalse
totalText总条数前缀文字string任意文本
jumpText跳页输入框前缀文字string任意文本跳至
pageText跳页输入框后缀文字string任意文本
size分页及输入框尺寸stringsmall / default / largedefault

其他属性会透传给内部 el-pagination,但 pageCounttotal / 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)

思云博智私有前端组件库