Pagination 分页

页码导航：上一页/页码/下一页/省略/条数切换/跳页/总数。页码窗口收缩算法在 core 层纯函数实现，可单测穷举。

基础用法

基础用法

• •••

<script setup lang="ts">
</script>

<template>
  <LhPagination :total="120" />
</template>

<script>
export default {}
</script>

<template>
  <LhPagination :total="120" />
</template>

总数与条数切换

总数与条数切换

共 480 条

• •••

每页条数10 条/页20 条/页30 条/页40 条/页

<script setup lang="ts">
</script>

<template>
  <LhPagination :total="480" show-total show-size-changer />
</template>

<script>
export default {}
</script>

<template>
  <LhPagination :total="480" show-total show-size-changer />
</template>

跳页

跳页

共 480 条

• •••

前往页

<script setup lang="ts">
</script>

<template>
  <LhPagination :total="480" show-total show-jumper />
</template>

<script>
export default {}
</script>

<template>
  <LhPagination :total="480" show-total show-jumper />
</template>

简洁模式

简洁模式

1 / 48前往页

<script setup lang="ts">
</script>

<template>
  <LhPagination :total="480" simple show-jumper />
</template>

<script>
export default {}
</script>

<template>
  <LhPagination :total="480" simple show-jumper />
</template>

受控用法

受控用法

• •••

当前页：2

<script setup lang="ts">
import { ref } from 'vue'
const page = ref(2)
const pageSize = ref(20)
</script>

<template>
  <LhPagination v-model:current="page" :total="95" />
</template>

<script>
export default {
  data() {
    return { page: 2, pageSize: 20 }
  },
}
</script>

<template>
  <LhPagination v-model:current="page" :total="95" />
</template>

每页条数与禁用

v-model:page-size 受控每页条数，page-sizes 自定义条数选项；disabled 禁用整个分页。

条数与禁用

• •••

每页条数10 条/页20 条/页50 条/页100 条/页

每页条数：20

• •••

<script setup lang="ts">
import { ref } from 'vue'
const pageSize = ref(20)
</script>

<template>
  <LhPagination
    v-model:page-size="pageSize"
    :total="480"
    show-size-changer
    :page-sizes="[10, 20, 50, 100]"
  />
  <LhPagination :total="480" disabled />
</template>

<script>
export default {
  data() {
    return { pageSize: 20 }
  },
}
</script>

<template>
  <LhPagination
    v-model:page-size="pageSize"
    :total="480"
    show-size-changer
    :page-sizes="[10, 20, 50, 100]"
  />
  <LhPagination :total="480" disabled />
</template>

Pagination API

Props

属性名	说明	类型	默认值
total	数据总数（必填）	number	—
pageSize	每页条数	number	10
current	当前页（v-model:current）	number	—
pageSizes	每页条数选项	number[]	() => [10, 20, 30, 40]
showTotal	是否显示总条数	boolean	false
showSizeChanger	是否显示每页条数切换	boolean	false
showJumper	是否显示跳页输入	boolean	false
simple	紧凑模式	boolean	false
disabled	是否禁用	boolean	false
sx	sx 快速布局属性	LhSxProps	—

Events

事件名	说明	回调参数
update:current	当前页变化（v-model）	(page: number)
update:pageSize	每页条数变化（v-model:pageSize）	(size: number)
change	页码变化	(page: number)
size-change	每页条数变化	(size: number)

无障碍

• 根元素为 <nav aria-label="pagination">
• 当前页按钮自动设置 aria-current="page"
• 每个页码按钮、上一页/下一页按钮都有独立的 aria-label（取语言包 pagination.page / prev / next），纯符号「‹」「›」由 aria-hidden 隐藏
• 跳页输入框带真实 <label>（取语言包 pagination.goto）
• 条数切换为原生 <select>，带 aria-label（取语言包 pagination.sizeChangerLabel）
• 省略号为纯展示 aria-hidden 元素，不干扰键盘导航

类型定义

本组件对外导出的 TypeScript 类型结构如下（自动提取自 packages/components/pagination/src/types.ts 与 @lh-ui/share/core/* 源码，点击各条目展开查看完整定义；属性说明见上方 Props 表）：

LhPaginationProps

export interface LhPaginationProps {
  /** 数据总数（必填） */
  total: number
  /** 每页条数 */
  pageSize?: number
  /** 当前页（v-model:current） */
  current?: number
  /** 每页条数选项 */
  pageSizes?: number[]
  /** 是否显示总条数 */
  showTotal?: boolean
  /** 是否显示每页条数切换 */
  showSizeChanger?: boolean
  /** 是否显示跳页输入 */
  showJumper?: boolean
  /** 紧凑模式 */
  simple?: boolean
  /** 是否禁用 */
  disabled?: boolean
  /** sx 快速布局属性 */
  sx?: LhSxProps
}