TPagination / 分页

Pagination for navigating through data pages. Supports auto page calculation, collapsed ellipsis, jump input, outline/circle variants, and custom text. / 分页组件用于数据分页导航，支持自动计算总页数、省略号折叠算法、跳转输入框、轮廓/圆形变体以及自定义文字。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
modelValue	number	1	v-model current page
total	number	—	Total pages (overrides totalItems/pageSize) / 总页数
totalItems	number	—	Total data items (used with pageSize) / 总数据量
pageSize	number	10	Items per page / 每页条数
variant	'default' | 'outline' | 'circle'	'default'	Style variant
size	'sm' | 'lg'	—	Size
disabled	boolean	false	Globally disabled
boundary	number	1	Pages always shown at start/end
around	number	1	Pages shown around current page
showFirstLast	boolean	false	Show first/last page buttons
prevText	string	—	Previous button text (icon if omitted)
nextText	string	—	Next button text (icon if omitted)
jump	boolean	—	Show jump input (auto if total > 20)

Events / 事件

Event	Description / 说明
@update:modelValue	v-model update (page change) / 页码变化
@update:page	Page changed (alias)
@update:page-size	Page size changed

Basic Usage / 基础用法

<script setup lang="ts">
import { TPagination } from '@gulcc/tabler-vue'

const current = ref(1)
</script>

<template>
  <TPagination v-model="current" :total="20" />
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TPagination } from '@gulcc/tabler-vue'

const page = ref(1)
const pageSize = ref(10)
const totalItems = 256
</script>

<template>
  <!-- Auto-calculate from totalItems + pageSize / 自动计算总页数 -->
  <TPagination
    v-model="page"
    :total-items="totalItems"
    :page-size="pageSize"
    @update:page-size="pageSize = $event"
  />

  <!-- With first/last buttons / 显示首页/末页 -->
  <TPagination
    v-model="page"
    :total="50"
    show-first-last
  />

  <!-- Variants / 变体 -->
  <TPagination v-model="page" :total="30" variant="outline" />
  <TPagination v-model="page" :total="30" variant="circle" />

  <!-- Sizes / 尺寸 -->
  <TPagination v-model="page" :total="20" size="sm" />
  <TPagination v-model="page" :total="20" size="lg" />

  <!-- Custom button text / 自定义按钮文字 -->
  <TPagination
    v-model="page"
    :total="15"
    prev-text="Previous / 上一页"
    next-text="Next / 下一页"
  />

  <!-- Jump input (auto-shown when total > 20) / 跳转输入框 -->
  <TPagination v-model="page" :total="50" />

  <!-- Disabled / 禁用 -->
  <TPagination v-model="page" :total="10" disabled />
</template>

Tips / 避坑指南

• Either pass total (direct page count) or totalItems + pageSize (auto-calculates pages)
• Ellipsis algorithm: boundary pages at start/end + around pages around current; rest collapsed with ...
• Jump input auto-appears when total pages > 20; use :jump="true" to force show
• Without prevText/nextText, the component renders chevron icons
• variant="circle" renders round page buttons; "outline" renders bordered buttons