CommonPagination 分页组件

CommonPagination 是基于 Element Plus ElPagination 的轻量封装，提供了后台列表常见的默认分页布局，并通过 v-model:pageNo、v-model:pageSize 对接列表查询参数。

主要特性：

• 提供后台列表常用的默认分页布局
• 支持页码与每页条数双向绑定
• 每页条数变化时自动回到第一页
• 统一通过 change 事件返回分页参数
• 透传大部分 Element Plus 原生分页属性

基础用法

适合列表页的基础分页场景，页码和每页条数会通过双向绑定自动同步。

Total 168

• 1
• 2
• 3
• 4
• 5
• 6
• 17

Go to

当前第 1 页，每页 10 条，共 17 页 / 168 条数据

展开代码

复制代码

布局配置

通过 layout 可以调整分页器显示顺序与显示内容。

通过 `layout` 可以快速切换列表页与报表页常见的分页布局。

紧凑布局

• 1
• 2
• 3
• 4
• 5
• 6
• 10

Go to

Total 96

默认布局

Total 320

• 1
• 2
• 3
• 4
• 5
• 6
• 16

Go to

展开代码

复制代码

插槽内容

默认布局包含 slot 区域，适合补充当前显示范围或说明信息。

默认布局内置 `slot` 区域，适合展示“当前显示范围”“数据更新时间”等补充说明。

当前显示第 1 - 20 条记录

Total 245

• 1
• 2
• 3
• 4
• 5
• 6
• 13

Go to

展开代码

复制代码

事件回调

通过 change 可以直接拿到当前分页参数。

监听 `change` 可直接拿到接口所需的分页参数，适合触发列表刷新。

Total 520

• 1
• 2
• 3
• 4
• 5
• 6
• 52

Go to

展开代码

复制代码

API

Props

参数	说明	类型	默认值
v-model:pageNo	当前页码	number	-
v-model:pageSize	每页条数	number	-
total	数据总条数	number	0
page-sizes	每页条数选项	number[]	[10, 20, 30, 40, 50]
layout	分页布局配置	string	'slot, ->, total, sizes, prev, pager, next, jumper'
background	是否显示带背景色的分页按钮	boolean	true
teleported	下拉面板是否挂载到 body	boolean	true

组件还支持大部分 Element Plus ElPagination 原生属性，例如 pager-count、hide-on-single-page、small、disabled 等。

Events

事件名	说明	回调参数
change	页码或每页条数变化时触发	(pagination: PaginationParam) => void

Slots

插槽名	说明
default	自定义分页左侧插槽内容，要求 layout 中包含 slot

TypeScript 类型

import type {
  CommonPaginationProps,
  PaginationParam,
} from '@yetuzi/vue3-query-components'

interface CommonPaginationProps extends Partial<PaginationProps> {}

type PaginationParam = {
  pageNo: number
  pageSize: number
}

参考

• Element Plus Pagination