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,
})

参数说明 ​

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

返回值 ​

名称类型说明
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恢复初始页码和初始每页数量。

思云博智私有前端组件库