默认主题
分页

示例

10 条 / 页
共 200 条
20 条 / 页
共 200 条
20 条 / 页
共 200 条
基本用法

Pagination的基本用法,通过total指定数据总条数,limit指定每页数据条数,limits数组定义可供选择的条数。可以通过change事件来监听组件currentlimit的变化,组件会将currentlimit以对象的方式传给事件回调函数。

如果总条数total0,则该组件不会渲染

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
10 条 / 页
共 200 条
10 条 / 页
共 200 条
10 条 / 页
共 200 条
10 条 / 页
共 200 条
指定尺寸

通过size可以指定组件的尺寸:large, default, small, mini

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
10 条 / 页
共 200 条
10 条 / 页
共 200 条
10 条 / 页
共 200 条
10 条 / 页
共 200 条
无边框样式

添加noBorder属性,可以展示无边框的样式效果

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
1
/ 20
1
/ 20
1
/ 20
1
/ 20
简洁样式

添加simple属性,可以展示简洁样式

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
10 条 / 页
共 200 条
10 条 / 页
共 200 条
改变翻页按钮数量

组件默认会展示7个翻页按钮(包括省略号...),通过counts属性我们可以指定按钮个数。

最好不要小于7个,否则影响体验。使用奇数可以使页码对称分布

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
10 条 / 页
跳至
共 200 条
展示快速跳转框

showGoto设为true可以展示快速跳转输入框

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
10 条 / 页
共 200 条
当前页码

通过current可以指定当前页码,当页码改变时,会触发默认事件$change:current$changed:current,我们可以指定相应的回调函数。

index.vdt
index.js
index.vue (Vue)
index.jsx (React)

属性

属性 说明 类型 默认值
size 尺寸 "large" | "default" | "mini" | "small" "default"
counts 展示按钮个数 Number 7
total 数据总条数 Number 0
current 当前页码 Number 1
limit 页面条数 Number 10
limits 页面条数 Array<Number> [10, 20, 50]
noBorder 是否展示无边框样式,默认有边框 Boolean false
simple 是否展示简洁样式 Boolean Boolean
showTotal 显示总条数 Boolean true
showGoto 显示快速跳转框 Boolean false
showLimits 是否显示每页条数选择框 Boolean true

方法

方法名 说明 参数 返回值
changePage 切换页码 要切换到的页码 undefined
prev 上一页 - undefined
next 下一页 - undefined

事件

事件名 说明 参数
change currentlimit变化时触发,同时变化不会重复触发 {current, limit}