当数据量过多时，使用分页分解数据。
基础用法
设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。分页元素包括：prev（跳转到上一页的按钮）、next（跳转到下一页的按钮）、pager（页码列表）、jumper（跳转输入框）、total（总条目数）、sizes（用于设置每页条数的选择器）以及 ->（该符号之后的所有元素将被靠右对齐）。
When you have more than 7 pages
export function PaginationBasic() { return ( <ElConfigProvider locale={en}> <div> <div style={demonstration}>When you have few pages</div> <ElPagination layout="prev, pager, next" total={50} /> </div> <div style={block}> <div style={demonstration}>When you have more than 7 pages</div> <ElPagination layout="prev, pager, next" total={1000} /> </div> </ElConfigProvider> );}
设置最大页码按钮数
默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。通过 pager-count 属性可以设置最大页码按钮数。
export function PaginationPagerCount() { return ( <ElConfigProvider locale={en}> <ElPagination pageSize={20} pagerCount={11} layout="prev, pager, next" total={1000} /> </ElConfigProvider> );}
带有背景色的分页
设置background属性可以为分页按钮添加背景色。
export function PaginationBackground() { return ( <ElConfigProvider locale={en}> <ElPagination background layout="prev, pager, next" total={1000} /> </ElConfigProvider> );}
小型分页
在空间有限的情况下，可以使用简单的小型分页。
export function PaginationSmall() { return ( <ElConfigProvider locale={en}> <ElPagination size="small" layout="prev, pager, next" total={50} /> <ElPagination size="small" background layout="prev, pager, next" total={50} style={{ marginTop: 16 }} /> </ElConfigProvider> );}
当只有一页时隐藏分页
当只有一页时，通过设置 hide-on-single-page 属性来隐藏分页。
export function PaginationHideOnSinglePage() { const [value, setValue] = useState(false); return ( <ElConfigProvider locale={en}> <div> <ElSwitch checked={value} onCheckedChange={setValue} /> <hr style={divider} /> <ElPagination hideOnSinglePage={value} total={5} layout="prev, pager, next" /> </div> </ElConfigProvider> );}
附加功能
根据场景需要，可以添加其他功能模块。
此示例是一个完整的用例。使用了 size-change 和 current-change 事件来处理页码大小和当前页变动时候触发的事件。 page-sizes接受一个整数类型的数组，数组元素为展示的选择每页显示个数的选项，[100, 200, 300, 400] 表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。
export function PaginationMore() { const [size, setSize] = useState<DemoSize>("default"); const [background, setBackground] = useState(false); const [disabled, setDisabled] = useState(false); const [currentPage1, setCurrentPage1] = useState(5); const [currentPage2, setCurrentPage2] = useState(5); const [pageSize2, setPageSize2] = useState(100); const [currentPage3, setCurrentPage3] = useState(5); const [pageSize3, setPageSize3] = useState(100); const [currentPage4, setCurrentPage4] = useState(4); const [pageSize4, setPageSize4] = useState(100); return ( <ElConfigProvider locale={en}> <div className="flex items-center mb-4" style={row}> <ElRadioGroup type="button" value={size} onChange={(value) => setSize(value as DemoSize)} className="mr-4" style={{ marginRight: 12 }} > <ElRadio value="default" label="default" /> <ElRadio value="large" label="large" /> <ElRadio value="small" label="small" /> </ElRadioGroup> <div> background: <ElSwitch checked={background} onCheckedChange={setBackground} className="ml-2" style={{ marginLeft: 8 }} /> </div> <div className="ml-4" style={{ marginLeft: 16 }}> disabled: <ElSwitch checked={disabled} onCheckedChange={setDisabled} className="ml-2" style={{ marginLeft: 8 }} /> </div> </div> <hr className="my-4" style={divider} /> <div> <div style={demonstration}>Total item count</div> <ElPagination currentPage={currentPage1} onCurrentPageChange={setCurrentPage1} pageSize={100} size={size} disabled={disabled} background={background} layout="total, prev, pager, next" total={1000} /> </div> <div style={block}> <div style={demonstration}>Change page size</div> <ElPagination currentPage={currentPage2} onCurrentPageChange={setCurrentPage2} pageSize={pageSize2} onPageSizeChange={setPageSize2} pageSizes={[100, 200, 300, 400]} size={size} disabled={disabled} background={background} layout="sizes, prev, pager, next" total={1000} /> </div> <div style={block}> <div style={demonstration}>Jump to</div> <ElPagination currentPage={currentPage3} onCurrentPageChange={setCurrentPage3} pageSize={pageSize3} onPageSizeChange={setPageSize3} size={size} disabled={disabled} background={background} layout="prev, pager, next, jumper" total={1000} /> </div> <div style={block}> <div style={demonstration}>All combined</div> <ElPagination currentPage={currentPage4} onCurrentPageChange={setCurrentPage4} pageSize={pageSize4} onPageSizeChange={setPageSize4} pageSizes={[100, 200, 300, 400]} size={size} disabled={disabled} background={background} layout="total, sizes, prev, pager, next, jumper" total={400} /> </div> </ElConfigProvider> );}
| 属性名 | 说明 | 类型 | 默认值 |
|---|
| total | 总条数 | number | — |
| page-size | 每页条数 | number | 10 |
| page-count | 总页数，传入后优先于 total/pageSize 的计算 | number | — |
| current-page | 当前页 | number | — |
| pager-count | 页码按钮数量，必须为 5~21 之间的奇数 | number | 7 |
| layout | 组件布局，逗号分隔 | string | prev, pager, next, jumper, ->, total |
| page-sizes | sizes 下拉的可选值 | array | [10, 20, 30, 40, 50, 100] |
| background | 是否显示背景色 | boolean | false |
| disabled | 是否禁用 | boolean | false |
| hide-on-single-page | 只有一页时是否隐藏 | boolean | false |
| small | 小号分页 | boolean | false |
| size | 尺寸 | enum | — |
| prev-text / next-text | 上一页 / 下一页文字，传入后替换箭头图标 | string | '' |
| 事件名 | 说明 | 参数 |
|---|
| onCurrentPageChange | 当前页变化 | Function |
| onPageSizeChange | 每页条数变化 | Function |
| 插槽名 | 说明 |
|---|
| default | 自定义内容，需在 layout 里声明 slot |
