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) ​

切换主题查看分页组件样式。基础用法:通过顶部选项切换主题。theme 可选值 default / chenghua / shijingshan / sybz / gulou,默认值 default。

手动输入回车跳页(showJumper 默认值:true) ​

超宽滚动 ​

仅显示页码(showTotal、showJumper、showSizes 默认值:true) ​

每页条数(pageSize 默认值:10,pageSizes 默认值:[10, 20, 30, 50]) ​

单页隐藏(hideOnSinglePage 默认值:false) ​

属性 ​

属性名说明类型可选值默认值
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,但 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)

思云博智私有前端组件库