Pagination 分页

用于分隔长列表，每次只加载一页数据。

基础用法

•••

基础分页，超过 7 页自动显示省略号

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <APagination :total="100" :default-current="1" />
  </div>
</template>

<script setup lang="ts">
import { APagination } from "@lite-code/aui-vue";
</script>

受控 + 功能配置

当前第 1 页，每页 10 条

共 237 条，第 1–10 条•••10 条/页20 条/页50 条/页跳至页

受控模式：外部管理 current / pageSize；showTotal 展示数据范围；showSizeChanger 切换每页条数

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <div style="font-size: 13px; color: var(--aui-text-3, #8b8b8f)">
      当前第 {{ page }} 页，每页 {{ pageSize }} 条
    </div>
    <APagination
      :total="237"
      :current="page"
      :page-size="pageSize"
      show-size-changer
      show-quick-jumper
      :page-size-options="[10, 20, 50]"
      :show-total="(t, [s, e]) => `共 ${t} 条，第 ${s}–${e} 条`"
      @change="
        (p, s) => {
          page = p;
          pageSize = s;
        }
      "
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { APagination } from "@lite-code/aui-vue";

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

尺寸与禁用

size="md"（默认）

•••

size="sm"

•••

disabled

•••

提供 md（默认）和 sm 两种尺寸；disabled 禁用整个分页器

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 20px">
    <div>
      <div
        style="
          margin-bottom: 8px;
          font-size: 12px;
          color: var(--aui-text-3, #8b8b8f);
        "
      >
        size="md"（默认）
      </div>
      <APagination :total="200" :default-current="3" size="md" />
    </div>
    <div>
      <div
        style="
          margin-bottom: 8px;
          font-size: 12px;
          color: var(--aui-text-3, #8b8b8f);
        "
      >
        size="sm"
      </div>
      <APagination :total="200" :default-current="3" size="sm" />
    </div>
    <div>
      <div
        style="
          margin-bottom: 8px;
          font-size: 12px;
          color: var(--aui-text-3, #8b8b8f);
        "
      >
        disabled
      </div>
      <APagination :total="200" :default-current="3" :disabled="true" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { APagination } from "@lite-code/aui-vue";
</script>

API

Props

属性	类型	默认值	说明
total	number	—	数据总条数（必填）
current	number	—	当前页（受控）
defaultCurrent	number	1	初始页（非受控）
pageSize	number	—	每页条数（受控）
defaultPageSize	number	10	初始每页条数（非受控）
pageSizeOptions	number[]	[10, 20, 50, 100]	可选每页条数
showSizeChanger	boolean	false	显示每页条数选择器
showQuickJumper	boolean	false	显示快速跳转输入框
showTotal	(total, range) => string	—	显示数据总量与范围
onChange	(page: number, pageSize: number) => void	—	页码或每页条数变化时回调
disabled	boolean	false	禁用分页器
size	'sm' | 'md'	'md'	尺寸

Events

事件	参数	说明
change	(page, pageSize: number)	页码或每页条数变化