Skip to content
On this page

usePagination 分页状态

Hidden Title

基础用法:const { page, pageSize, total, setPage, setPageSize } = usePagination({ pageSize: 10, total: 86 })

基础用法

说明

usePagination 用来统一维护分页参数,适合表格、列表、卡片流等需要分页查询的页面。

调用形式

ts
const pagination = usePagination({
  page: 1,
  pageSize: 10,
  total: 0,
})
const pagination = usePagination({
  page: 1,
  pageSize: 10,
  total: 0,
})

参数说明

参数类型必填默认值说明
pagenumber1当前页。
pageSizenumber10每页数量。
totalnumber | Ref<number>0总数量,传 Ref 时会自动同步。
pageSizesnumber[][10, 20, 30, 50, 100]可选每页数量。
resetPageOnPageSizeChangebooleantrue修改每页数量时是否回到第一页。

返回值

名称类型说明
pageRef<number>当前页。
pageSizeRef<number>每页数量。
totalRef<number>总数量。
pageSizesnumber[]可选每页数量。
pageCountComputedRef<number>总页数,最小为 1。
offsetComputedRef<number>当前分页偏移量。
limitComputedRef<number>当前分页 limit。
setPage(value: number) => void设置当前页,并自动限制在合法范围内。
setPageSize(value: number) => void设置每页数量。
setTotal(value: number) => void设置总数。
resetPage() => void回到第一页。
reset() => void恢复初始页码和初始每页数量。

思云博智私有前端组件库