xiaoye-components

Appearance

Pagination 分页 ​

xy-pagination 用于列表页分页切换，支持当前页、每页条数、页码折叠、省略号、跳页输入和布局编排。

基础用法 ​

最常见的场景是把它放在 xy-table 底部，并用双向绑定接住页码与每页条数。

基础用法数据分页

分页组件用于处理大量数据的分页展示，支持当前页和每页条数切换。

共 86 条
第 3 页 / 每页 20 条

服务端参数同步 ​

后台列表请求通常需要 page / pageSize / offset / limit 这一类参数，Pagination 更适合作为外部请求状态的一部分。

共 286 条
当前请求参数
{
  "page": 2,
  "pageSize": 20,
  "offset": 20,
  "limit": 20
}

布局与背景样式 ​

通过 layout 可以组合 prev / pager / next / jumper / total / sizes / slot，background 提供按钮式分页。

共 286 条

尺寸层级 ​

small 适合更紧凑的列表工具区，size 则能和全局或局部表单尺寸体系保持一致。

默认尺寸
共 86 条
small
共 86 条
lg
共 86 条

筛选后重置分页 ​

当筛选条件变化时，通常需要把当前页重置回 1，避免用户停留在失效页码上。

共 5 条
当前页：3 / 结果数：5

禁用状态 ​

当列表处于整体只读、加载中或没有权限切页时，可以统一禁用分页交互。

共 42 条

何时使用 ​

  • 列表页底部。
  • 查询结果页的内容区域下方。
  • 与 xy-table 组合成后台列表闭环。

API ​

Pagination Attributes ​

属性说明类型默认值
current-page当前页码numberundefined
default-current-page非受控场景下的初始页码number1
page-size每页条数numberundefined
default-page-size非受控场景下的初始每页条数number10
total总条数numberundefined
page-count总页数，传入时优先级高于 totalnumberundefined
pager-count显示的页码按钮数量，超出后会折叠成省略号number7
layout分页布局，支持 prev, pager, next, jumper, total, sizes, slot, ->string'prev, pager, next, jumper, ->, total'
page-sizes可选每页条数number[][10, 20, 30, 40, 50, 100]
prev-text上一页按钮文案string''
next-text下一页按钮文案string''
size分页尺寸ComponentSize跟随全局配置
small是否启用紧凑尺寸，优先级高于 sizebooleanfalse
teleported每页条数下拉是否挂到 bodybooleantrue
append-size-to每页条数下拉挂载目标string | HTMLElement'body'
popper-class每页条数下拉自定义类名string''
popper-style每页条数下拉自定义样式StyleValueundefined
disabled是否禁用分页操作booleanfalse
background是否启用带背景的按钮风格booleanfalse
hide-on-single-page仅一页时是否隐藏booleanfalse

Pagination Events ​

事件说明参数
update:current-page当前页变化时触发PaginationPageHandler
update:page-size每页条数变化时触发PaginationPageHandler
current-change当前页变化时触发PaginationPageHandler
size-change每页条数变化时触发PaginationPageHandler
prev-click点击上一页时触发PaginationPageHandler
next-click点击下一页时触发PaginationPageHandler
change页码或每页条数变化时统一触发PaginationChangeHandler

Pagination Slots ​

插槽说明
default当 layout 中包含 slot 时渲染自定义内容