使用方法

Pagination 是一个分页导航组件，用于将大量数据分割成多个页面展示。用户可以通过点击页码、上下页按钮或输入页码跳转到指定页面。

基本用法需要提供总条目数和当前页码：

<script setup lang="ts">
import { Pagination } from '@astryx-vue/core/Pagination'
import { ref } from 'vue'

const page = ref(1)
const total = ref(100)
</script>

<template>
  <Pagination v-model:page="page" :total="total" />
</template>

通过 pageSize 属性设置每页显示的条目数。开启 showSizeChanger 后，用户可以自行选择每页显示数量。按钮和总数文案默认是英文，调用 provideAstryxLocale('zh-CN') 后改为中文。

解剖

部分	说明
分页	装着当前分页控件和可选的每页条数选择器的导航地标。
每页条数	可选的 Selector，用来选择每页显示多少项。
首页和末页按钮	可选的 Button，跳到已知的第一页或最后一页。
上一页和下一页	在页面之间向前或向后移动的按钮。
页码按钮	编号呈现方式里，直接选中某一页的按钮。
省略号	不相邻的页码按钮之间的省略标记。
计数读出	显示当前条目范围和总条目数的文字。
紧凑读出	显示当前页和总页数的文字。
圆点	反映并切换当前页的页指示。
页码输入标签	可编辑页码字段前面的可见标签。
页码输入	用来直接输入页码的 NumberInput。
页码总数	尾部文字，显示已知的总页数。

最佳实践

指引	实践
推荐	在表格、列表等数据展示场景使用分页控制。
推荐	数据量大时提供页码跳转和每页数量选择功能。
推荐	显示总条目数和当前范围，让用户了解数据规模。
避免	在窄屏上铺一长排页码按钮。页码很多时让控件保持紧凑。

示例

圆点轮播

A thorough report was done on our financial situation. Better deals were found and processed on our behalf, which took a lot of stress away.

JG

Jeannie GrantJune 01, 2025

圆点分页用来翻过几条评价。总数不大时，位置比页码更重要。

每页数量

Transactions

Date	Description	Amount
Apr 18	Payment received	$2,450.00
Apr 15	Subscription renewal	$99.00
Apr 12	Refund issued	-$180.00
Apr 10	Invoice paid	$1,200.00

共 350 条，显示 1-10

每页

请选择

分页放在交易表格下面，并可以调整每页行数。

表格分页

Name	Role	Status
Olivia Chen	Engineer	Active
Marcus Rivera	Designer	Active
Aisha Patel	Marketing	Invited
James Okafor	Engineer	Active

共 12 条，显示 1-4

小号的计数分页放在表格下面，显示当前页覆盖的条目范围。

输入页码

页/ 24

输入页码后跳转，两侧可以直达首页和末页。总数未知时改用 hasMore，不再显示末页。