开发指南
何时使用
在有大量内容展现需要进行分页加载处理的时候。
在有大量内容展现需要进行分页加载处理的时候。
非受控分页,是指分页组件的状态由自己维护,组件值的改变可以通过 onChange
事件通知父组件,默认值由 defaultCurrent
初始化。
受控分页,是指分页组件的状态由父组件维护,组件自身只负责渲染其父组件传递的值,父组件通过 current
属性传递当前的值。
可以通过指定 type
属性来设置分页的类型。
可以通过设置 pageSize
属性来指定每页显示的数量。
可以通过设置 pageSizeSelector
属性来指定是否显示 每页数量选择 的部件以及部件形状。
可以通过设置 pageSizeList
属性来指定 每页显示数量 可选的值。
可以通过设置 pageSizePosition
属性来指定 每页显示数量选择 的部件显示在整个组件的开始位置还是结束位置。
可以通过设置 onPageSizeChange
属性来指定每页显示的数量变化时的回调函数。
分页组件默认不显示总数,你可以通过 totalRender 自定义总数的显示结果。
单页应用场景下,Pagination 组件可以使用外部跳转的方法来实现单页内部跳转。
使用popupProps
prop 中的align
属性设置下拉位置。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 分页组件类型 可选值: 'normal', 'simple' | Enum | 'normal' |
current | (受控)当前页码 | Number | - |
defaultCurrent | (非受控)初始页码 | Number | 1 |
onChange | 页码发生改变时的回调函数 签名: Function(current: Number, e: Object) => void 参数: current: {Number} 改变后的页码数 e: {Object} 点击事件对象 | Function | () => {} |
total | 总记录数 | Number | 100 |
totalRender | 总数的渲染函数 签名: Function(total: Number, range: Array) => void 参数: total: {Number} 总数 range: {Array} 当前数据在总数中的区间 | Function | - |
pageShowCount | 页码显示的数量,更多的使用...代替 | Number | 5 |
pageSize | 一页中的记录数 | Number | 10 |
pageSizeSelector | 每页显示选择器类型 可选值: false,'dropdown' | Enum | false |
pageSizeList | 每页显示选择器可选值 | Array<Number>/Array<Object> | 5, 10, 20 |
onPageSizeChange | 每页显示记录数量改变时的回调函数 签名: Function(pageSize: Number) => void 参数: pageSize: {Number} 改变后的每页显示记录数 | Function | () => {} |
hideOnlyOnePage | 当分页数为1时,是否隐藏分页器 | Boolean | false |
showJump | type 设置为 normal 时,在页码数超过5页后,会显示跳转输入框与按钮,当设置 showJump 为 false 时,不再显示该跳转区域 | Boolean | true |
popupProps | 弹层组件属性,透传给Popup | Object | - |
按键 | 说明 |
---|---|
Tab | 切换页数 |
Space | 按下按钮 |
Enter | 按下按钮 |