Appearance

Pagination 分页 ​

采用分页的形式分隔长列表，每次只加载一个页面。

代码演示 ​

基础用法 ​

基础分页

vue
<template>
  <a-pagination v-model:current="current" :total="50" show-less-items />
</template>
<script setup>
import { ref } from 'vue';
const current = ref(2);
</script>

更多 ​

更多分页

vue
<template>
  <a-pagination v-model:current="current" :total="500" />
</template>
<script setup>
import { ref } from 'vue';
const current = ref(6);
</script>

改变 ​

改变每页显示条目数。

vue
<template>
  <div>
    <a-pagination
      v-model:current="current3"
      v-model:pageSize="pageSize"
      show-size-changer
      :total="500"
      @showSizeChange="onShowSizeChange"
    />
    <br />
    <a-pagination
      v-model:current="current2"
      show-size-changer
      :total="500"
      disabled
      @showSizeChange="onShowSizeChange"
    />
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
const pageSize = ref(20);
const current1 = ref(3);
const current2 = ref(4);
const onShowSizeChange = (current, pageSize) => {
  console.log(current, pageSize);
};
watch(pageSize, () => {
  console.log('pageSize', pageSize.value);
});
watch(current1, () => {
  console.log('current', current1.value);
});
</script>

自定义下拉选项 ​

自定义下拉选项，例如添加全部选项

vue
<template>
  <a-pagination
    v-model:current="current4"
    v-model:page-size="pageSizeRef"
    :page-size-options="pageSizeOptions"
    :total="total"
    show-size-changer
    @showSizeChange="onShowSizeChange1"
  >
    <template #buildOptionText="props">
      <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
      <span v-else>全部</span>
    </template>
  </a-pagination>
</template>
<script setup>
import { ref } from 'vue';
const pageSizeOptions = ref(['10', '20', '30', '40', '50']);
const current = ref(1);
const pageSizeRef = ref(10);
const total = ref(50);
const onShowSizeChange = (current, pageSize) => {
  console.log(current, pageSize);
  pageSizeRef.value = pageSize;
};
</script>

跳转 ​

快速跳转到某一页。


vue
<template>
  <div>
    <a-pagination v-model:current="current1" show-quick-jumper :total="500" @change="onChange" />
    <br />
    <a-pagination
      v-model:current="current2"
      show-quick-jumper
      :total="500"
      disabled
      show-less-items
      @change="onChange"
    />
  </div>
</template>
<script setup>
import { ref } from 'vue';
const current1 = ref(1);
const current2 = ref(2);
const onChange = pageNumber => {
  console.log('Page: ', pageNumber);
};
</script>

总数 ​

通过设置 showTotal 展示总共有多少数据。

  • Total 85 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • 20 / page

  • 21-40 of 85 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • 20 / page
vue
<template>
  <div>
    <a-pagination
      v-model:current="current1"
      v-model:page-size="pageSize1"
      :total="85"
      :show-total="total => `Total ${total} items`"
    />
    <br />
    <a-pagination
      v-model:current="current2"
      v-model:page-size="pageSize2"
      :total="85"
      :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
    />
  </div>
</template>
<script setup>
import { ref } from 'vue';
const current1 = ref(1);
const current2 = ref(2);
const pageSize1 = ref(20);
const pageSize2 = ref(20);
</script>

API ​

html
<a-pagination @change="onChange" :total="50" />
参数说明类型默认值
current(v-model)当前页数number-
defaultPageSize默认的每页条数number10
disabled禁用分页boolean-
hideOnSinglePage只有一页时是否隐藏分页器booleanfalse
itemRender用于自定义页码的结构，可用于优化 SEO({page, type: 'page' | 'prev' | 'next', originalElement}) => vNode | v-slot-
pageSize(v-model)每页条数number-
pageSizeOptions指定每页可以显示多少条string[] | number[]['10', '20', '50', '100']
responsive当 size 未指定时，根据屏幕宽度自动调整尺寸boolean-
showLessItems是否显示较少页面内容booleanfalse
showQuickJumper是否可以快速跳转至某页booleanfalse
showSizeChanger是否展示 pageSize 切换器，当 total 大于 50 时默认为 trueboolean-
showTotal用于显示数据总量和当前数据顺序Function(total, range)-
simple当添加该属性时，显示为简单分页boolean-
size当为「small」时，是小尺寸分页string""
total数据总数number0

事件 ​

事件名称说明回调参数
change页码或 pageSize 改变的回调，参数是改变后的页码及每页条数Function(page, pageSize) noop
showSizeChangepageSize 变化的回调Function(current, size) noop