分页状态 Hooks：usePagination

usePagination 集中管理 currentPage / pageSize / total 分页状态：spread 可直接 v-bind 到 el-pagination（含 update 回调）、setTotal 写入总数并自动回落越界页码、改每页条数自动回首页（可关）、onChange 统一接管翻页请求时机。列表页请求编排的状态底座。

基本用法

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { usePagination } from 'vue3-ep-biz-lib'
import { ElPagination } from 'element-plus'

const rows = ref<Row[]>([])

const pager = usePagination({
  onChange: (page, size) => load(page, size), // 翻页 / 改条数统一触发
})

const load = async (page = pager.currentPage.value, size = pager.pageSize.value): Promise<void> => {
  const res = await api.list({ page, size })
  rows.value = res.rows
  pager.setTotal(res.total) // 页码越界自动回落到最后一页
}

onMounted(() => load())
</script>

<template>
  <ElPagination
    v-bind="pager.spread"
    layout="total, sizes, prev, pager, next, jumper"
    background
  />
</template>

API

usePagination(options): UsePaginationReturn

成员	类型	说明
currentPage	Ref<number>	当前页码
pageSize	Ref<number>	每页条数
total	Ref<number>	总条数（写入建议走 setTotal）
pageSizes	Ref<number[]>	每页条数可选项
pageCount	ComputedRef<number>	总页数（total 为 0 时为 0）
spread	ComputedRef<PaginationSpread>	直接 v-bind 到 el-pagination（含 update 回调）
setTotal	(total: number) => void	写入总条数（按需回落当前页）
reset	() => void	回到第一页（保留每页条数）

options

属性	类型	默认值	说明
currentPage	number	1	初始页码
pageSize	number	10	初始每页条数
total	number	0	初始总条数
pageSizes	number[]	[10, 20, 50, 100]	每页条数可选项
onChange	(page, pageSize) => void	—	翻页 / 改条数回调（请求时机）
resetOnSizeChange	boolean	true	改变每页条数后回到第一页
clamp	boolean	true	setTotal 后当前页超出总页数时回落

TIP

spread 内含 onUpdate:currentPage / onUpdate:pageSize 回调，配合 el-pagination 无需再写 v-model；搜索条件变化时调用 reset() 回首页（当前已在第 1 页时不重复触发 onChange）再重新加载。一页式 CRUD 直接用 BizCrudPage。