Pagination 分页

Pagination 是基于 Element Plus Pagination 封装的分页组件，支持自定义每页条数下拉、响应式布局，每页条数文案走 Element Plus 自身的国际化。

基础用法

通过 v-model:current-page 和 v-model:page-size 双向绑定页码与每页条数，total 传入总条数。

loading

每页条数模式

page-sizes 控制每页条数选择器的形态，共三种模式：

• 不传 / undefined：使用内置自定义下拉，固定提供 10 / 20 / 50 / 100；
• 传入 number[]：使用 Element Plus 内置的 page-sizes 下拉；
• 传入 false：不显示每页条数选择器。

loading

响应式与自定义布局

组件会根据屏幕宽度自动切换布局：桌面端（≥768px）为 total, slot, prev, pager, next, jumper，移动端（<768px）为 prev, pager, next。也可通过 pagination-layout 手动覆盖。

loading

在 PcTable 中使用

PcTable 内部已集成 Pagination，一般无需单独引入。需要独立分页场景时再单独使用：

import { Pagination } from '@sud-web/vue-ui'

API

Attributes

属性	说明	类型	默认值
total	数据总条数	number	0
page-sizes	每页条数选择器模式：undefined 内置自定义下拉 / number[] EP 内置下拉 / false 隐藏	boolean | number[]	undefined
pagination-layout	自定义布局，覆盖默认响应式布局	string	响应式自动

v-model

名称	说明	类型	默认值
v-model:current-page	当前页码	number	1
v-model:page-size	每页条数	number	10

每页条数文案（如「10 条/页」）走 Element Plus 的国际化（el.pagination.pagesize），无需也无法通过 props 自定义格式。