使用场景:当需要大量内容显示时,就会使用分页器来处理。
非受控分页,是指分页组件的状态由自己维护,组件值的改变可以通过 onChange 事件通知父组件,默认值由 defaultCurrent 初始化。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
size | 分页组件大小 可选值: 'small', 'medium', 'large' | Enum | 'medium' |
type | 分页组件类型 可选值: 'normal', 'simple', 'mini' | Enum | 'normal' |
shape | 前进后退按钮样式 可选值: 'normal', 'arrow-only', 'arrow-prev-only', 'no-border' | 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, 'filter', 'dropdown' | Enum | false |
pageSizeList | 每页显示选择器可选值 | Array<Number>/Array<Object> | [5, 10, 20] |
pageNumberRender | 自定义页码渲染函数,函数作用于页码button以及当前页/总页数的数字渲染 签名: Function(index: Number) => ReactNode 参数: index: {Number} 分页的页码,从1开始 返回值: {ReactNode} 返回渲染结果 | Function | index => index |
pageSizePosition | 每页显示选择器在组件中的位置 可选值: 'start', 'end' | Enum | 'start' |
useFloatLayout | 存在每页显示选择器时是否使用浮动布局 | Boolean | false |
onPageSizeChange | 每页显示记录数量改变时的回调函数 签名: Function(pageSize: Number) => void 参数: pageSize: {Number} 改变后的每页显示记录数 | Function | () => {} |
hideOnlyOnePage | 当分页数为1时,是否隐藏分页器 | Boolean | false |
showJump | type 设置为 normal 时,在页码数超过5页后,会显示跳转输入框与按钮,当设置 showJump 为 false 时,不再显示该跳转区域 | Boolean | true |
link | 设置页码按钮的跳转链接,它的值为一个包含 {page} 的模版字符串,如:https://www.taobao.com/{page} | String | - |
popupProps | 弹层组件属性,透传给Popup | Object | - |