pagination

Pagination 分页

分页用于在数据列表中进行分页浏览。已对齐 Element Plus 风格，支持 prev/pager/next/sizes/total/jumper 布局，省略号页码、小号与背景样式、禁用态、隐藏单页等。

基础用法

默认展示左箭头/页码/右箭头与总数、页大小切换。

总条数

…

vue

<script setup lang="ts">
import { ref } from 'vue'
const total = ref(120)
const currentPage = ref(1)
const pageSize = ref(10)
</script>

<template>
  <c-pagination
    :total="total"
    v-model:currentPage="currentPage"
    v-model:pageSize="pageSize"
  />
</template>

自定义布局与总数文案

使用 layout 配置部件，-> 将右侧分组。总条数固定显示在最左侧（受 show-total 控制），通过 total-text 自定义文案（支持 {total}）。

共 120 条

…

vue

<c-pagination
  :total="total"
  v-model:currentPage="currentPage"
  v-model:pageSize="pageSize"
  :show-total="true"
  total-text="共 {total} 条"
/>

页大小切换（小号与背景）

通过 page-sizes 配置选项，使用 small 与 background 控制视觉风格。

总条数

…

vue

<c-pagination
  :total="total"
  v-model:currentPage="currentPage"
  v-model:pageSize="pageSize"
  :show-size-changer="true"
  :page-sizes="[10, 20, 50, 100]"
/>

跳页与强制显示（total=0）

通过 show 显式控制显示，即使 total 为 0 也可展示。layout 中加入 jumper 启用输入跳转。

总条数

前往页

vue

<c-pagination
  :total="0"
  :show="true"
  v-model:currentPage="currentPage"
  v-model:pageSize="pageSize"
/>

Props

total: number 数据总条数
pageCount: number 总页数（与 total 二选一）
pageSize: number 每页数量，支持 v-model:pageSize
currentPage: number 当前页码，支持 v-model:currentPage
layout: string 布局定义，示例 prev, pager, next, sizes, total, jumper，支持 -> 分隔右侧
pagerCount: number 页码按钮数量（奇数，默认 7）
pageSizes: number[] 页大小选项列表（默认 [10, 20, 50, 100]）
small: boolean 小号样式
background: boolean 背景样式
disabled: boolean 禁用态
hideOnSinglePage: boolean 仅一页时隐藏
show: boolean 兼容：是否显示分页（优先级高于 total 判断）
showSizeChanger: boolean 兼容：是否显示页大小切换器（优先于 layout）
showTotal: boolean 兼容：是否显示总数文案（优先于 layout）
totalText: string 总数文案模板，支持 {total} 占位符（默认 总条数）
prevText: string 上一页按钮文案（默认左箭头）
nextText: string 下一页按钮文案（默认右箭头）

Events

update:currentPage 当前页变化（v-model:currentPage）
update:pageSize 页大小变化（v-model:pageSize）
current-change 当前页变化（Element Plus 风格）
size-change 页大小变化（Element Plus 风格）
change 页码或页大小变化（兼容事件）

pagination ​

Pagination 分页 ​

基础用法 ​

自定义布局与总数文案 ​

页大小切换（小号与背景） ​

跳页与强制显示（total=0） ​

Props ​

Events ​