uiwjsPagination 分页
当数据量较多时，使用分页可以快速进行数据切换，每次只加载一个页面。
import { Pagination } from 'uiw';
// or
import Pagination from '@uiw/react-pagination';基本用法
```jsx mdx:preview&bg=#fff import React from 'react'; import { Pagination, Divider } from 'uiw';
export default function Demo() { const [pageObj, setPageObj] = React.useState({ current: 2, pageSize: 10 }); return (
<Pagination
current={pageObj.current}
pageSize={pageObj.pageSize}
total={30}
divider
pageSizeOptions={[5, 10, 20, 30]}
onShowSizeChange={(current, pageSize) => setPageObj({
current: current,
pageSize: pageSize
})}
/>
<Divider />
<Pagination current={2} pageSize={10} total={38} divider />
<Divider />
<Pagination current={1} pageSize={5} total={249} pageSizeOptions={[5, 10, 20, 30]} />
<Divider />
<Pagination current={1} alignment="center" pageSize={10} total={50} />
<Divider />
<Pagination current={1} pageSize={10} total={60} divider />
<Divider />
<Pagination current={1} pageSize={10} total={70} divider />
)
}
### 迷你分页
```jsx mdx:preview&bg=#fff
import React from 'react';
import { Pagination, Divider } from 'uiw';
export default function Demo() {
return (
<div>
<Pagination size="small" current={1} pageSize={5} pageSizeOptions={[5, 10, 20, 30]} total={249} />
<Divider />
<Pagination size="small" current={1} pageSize={10} total={50} />
</div>
);
}对齐
目前有三种对齐方式 左边(left)、中间(center)、右边(right)。
```jsx mdx:preview&bg=#fff import React from 'react'; import { Pagination, Divider } from 'uiw';
export default function Demo() { return (
<Pagination
current={5}
total={250}
onChange={(pageNumber) => {
console.log(
);
}
```
pageNumber:${pageNumber})
}}
/>
<Divider />
<Pagination
current={1}
alignment="center"
total={250}
onChange={(pageNumber) => {
console.log(pageNumber:${pageNumber})
}}
/>
<Divider />
<Pagination
current={25}
alignment="right"
total={250}
onChange={(pageNumber) => {
console.log(pageNumber:${pageNumber})
}}
/>
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| current | 当前页数，选中的页数 | Number | 1 |
| total | 数据总数 | Number | 0 |
| pageSize | 每页条数 | Number | 10 |
| pageSizeOptions | 指定每页可以显示多少条 | Number[] | - |
| divider | 页码之间是否间隔 | Boolean | - |
| size | 当为 small 时，是小尺寸分页 |
Enum{small, default} |
- |
| alignment | 对齐 | Enum{left, center, right} |
left |
| onChange | 页码改变的回调，返回改变后的页码 | Function(current, total, pageSize) | - |
| onShowSizeChange | pageSize 变化的回调 | Function(current, pageSize) | - |