Pagination 分页

Pagination 分页 的基础用法、公开 API 与示例。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref, } from "vue";
import { Pagination } from "@/components/pro/pagination";

const demoProps = { total: 120, pageSize: 10 };
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <Pagination v-bind="demoProps"></Pagination>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { defaultPaginationInfo, Pagination } from "@/components/pro/pagination";

Props

参数	说明	类型	默认值	必填
autoScroll	切换页数，是否自动滚动到最上面	boolean	true	否
hidden	是否隐藏分页	boolean	false	否
reset	切换 pageSize，pageNum 是否重置为 1	boolean	true	否
total	总数	number	0	否
align	分页对齐方式	"left" | "right"	"right"	否
layoutConfig	分页布局配置	string	"total, sizes, prev, pager, next, jumper"	否
modelValue	组件双向绑定值。	PaginationInfo	() => defaultPaginationInfo	否

Events

事件名	说明	回调参数
change	分页改变事件	pageInfo: PaginationInfo
currentChange	当前页码改变事件	pageNum: number
sizeChange	页码大小改变事件	pageSize: number
update:modelValue	双向绑定值更新时触发。	value: PaginationInfo

Slots

插槽名	说明	参数
pagination-left	pagination-left 内容插槽。	-
pagination-right	pagination-right 内容插槽。	-

Expose

名称	说明	类型
defaultPaginationInfo	默认分页信息。	-

Module API

名称	说明	类型
Pagination	导出 Pagination 供业务侧复用。	useInstall(index)

Types

PaginationProps

导出 PaginationProps 供业务侧复用。

字段	说明	类型	默认值	必填
autoScroll	切换页数，是否自动滚动到最上面	boolean	true	否
hidden	是否隐藏分页	boolean	false	否
reset	切换 pageSize，pageNum 是否重置为 1	boolean	true	否
total	总数	number	0	否
align	分页对齐方式	"left" | "right"	'right'	否
layoutConfig	分页布局配置	string	'total, sizes, prev, pager, next, jumper'	否

PaginationEmits

导出 PaginationEmits 供业务侧复用。

字段	说明	类型	默认值	必填
change	分页改变事件	[pageInfo: PaginationInfo]	-	是
currentChange	当前页码改变事件	[pageNum: number]	-	是
sizeChange	页码大小改变事件	[pageSize: number]	-	是

PaginationInfo

导出 PaginationInfo 供业务侧复用。

字段	说明	类型	默认值	必填
pageNum	当前页	number	-	是
pageSizes	页码数组	number[]	-	否
pageSize	一页显示多少条数据	number	-	是

API 根据当前组件源码生成；同步版本与验证记录见维护说明。