Pagination
Data pagination for page navigation.
Basic Usage
Set total to define total items. Page count is calculated automatically.
vue
<APagination :total="50" />More Pages
Ellipsis auto-appears when there are many pages.
vue
<APagination :total="200" />Current Page
Bind the current page with v-model.
Current: 1
vue
<script setup>
import { ref } from 'vue'
const current = ref(1)
</script>
<APagination v-model="current" :total="100" />Custom Page Size
Set items per page with pageSize.
vue
<APagination :total="200" :page-size="20" />API
Props
| Name | Type | Default | Description |
|---|---|---|---|
total | number | — | Total items |
pageSize | number | 10 | Items per page |
modelValue | number | 1 | Current page |
Events
| Name | Description |
|---|---|
update:modelValue | Page changed |
change | Page changed (same as update:modelValue) |
Interaction
- Hover background color transition on buttons
- Active page highlighted with accent color
- Prev/next disabled state on first/last page
- Multi-page auto-collapse to ellipsis