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
}