分页

示例

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

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

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
showTotal 显示总条数 Boolean true
current 当前页码 Number 1
showGoto 显示快速跳转框 Boolean false
limit 页面条数 Number 10
limits 页面条数 Array<Number> [10, 20, 50]
noBorder 是否展示无边框样式,默认有边框 Boolean false
simple 是否展示简洁样式 Boolean Boolean

方法

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

事件

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