Appearance
usePagination
usePagination 提供了分页相关的状态管理和事件处理,包括页码、每页条数、排序等功能,可以与 Element Plus 的分页组件完美配合使用。
基础用法
API
返回值
名称 | 说明 | 类型 |
---|---|---|
pagination | 分页配置对象 | Ref<PaginationState> |
getParams | 获取分页参数方法 | () => Pagination |
handlePagination | 分页事件处理方法 | (getData: () => void) => PaginationHandlers |
PaginationState 类型
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
page | 当前页码 | number | 1 |
size | 每页条数 | number | 10 |
total | 总条数 | number | 0 |
sizes | 可选的每页条数 | number[] | [10, 20, 50, 100] |
layout | 分页组件布局 | string | 'total, sizes, prev, pager, next, jumper' |
sort | 排序信息 | { prop: string; order: string; column: any } | null | null |
order | 排序方向 | string | null | null |
PaginationHandlers 类型
方法名 | 说明 | 参数 |
---|---|---|
onSizeChange | 每页条数改变时的回调 | (size: number) => Promise<void> |
onCurrentChange | 当前页改变时的回调 | (page: number) => Promise<void> |
onSortChange | 排序改变时的回调 | (prop: SortInfo, order: string) => Promise<void> |