Pagination 分页

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

代码演示

基本

基础分页。

<template>
  <f-pagination v-model:current="current" :total="50" show-less-items />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const current = ref(2)
</script>

更多

更多分页。

<template>
  <f-config-provider :locale="locale">
    <f-pagination v-model:current="current" :total="500" show-less-items />
  </f-config-provider>
  
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import zhCN from 'ant-design-vue/lib/locale/zh_CN'
const locale = ref(zhCN)
const current = ref(6)
</script>

改变

改变每页显示条目数。

<template>
  <f-config-provider :locale="locale">
    <f-pagination
      v-model:current="current1"
      v-model:pageSize="pageSize"
      show-size-changer
      :total="500"
      @showSizeChange="onShowSizeChange"
    />
    <br />
    <f-pagination
      v-model:current="current2"
      show-size-changer
      :total="500"
      disabled
      @showSizeChange="onShowSizeChange"
    />
  </f-config-provider>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

import zhCN from 'ant-design-vue/lib/locale/zh_CN'
const locale = ref(zhCN)
const pageSize = ref(20)
const current1 = ref(3)
const current2 = ref(4)
const onShowSizeChange = (current: number, pageSize: number) => {
  console.log(current, pageSize)
}
watch(pageSize, () => {
  console.log('pageSize', pageSize.value)
})
watch(current1, () => {
  console.log('current', current1.value)
})
</script>

跳转

快速跳转到某一页。

<template>
  <f-config-provider :locale="locale">
    <f-pagination v-model:current="current1" show-quick-jumper :total="500" @change="onChange" />
  </f-config-provider>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import zhCN from 'ant-design-vue/lib/locale/zh_CN'
const locale = ref(zhCN)
const current1 = ref<number>(1)
const onChange = (pageNumber: number) => {
  console.log('Page: ', pageNumber)
}
</script>

总数

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

<template>
  <f-config-provider :locale="locale">
    <f-pagination
      v-model:current="current"
      v-model:page-size="pageSize"
      :total="85"
      :show-total="total => `共 ${total} 页`"
    />
  </f-config-provider>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import zhCN from 'ant-design-vue/lib/locale/zh_CN'
const locale = ref(zhCN)
const current = ref<number>(1)
const pageSize = ref<number>(20)
</script>

简洁

简单的翻页。

<template>
  <f-config-provider :locale="locale">
    <f-pagination v-model:current="current" simple :total="50" />
  </f-config-provider>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import zhCN from 'ant-design-vue/lib/locale/zh_CN'
const locale = ref(zhCN)
const current = ref<number>(2)
</script>

迷你

迷你版本。

<template>
  <f-config-provider :locale="locale">
    <f-pagination size="small" :total="50" />
    <br />
    <f-pagination size="small" :total="50" show-size-changer show-quick-jumper />
    <br />
    <f-pagination size="small" :total="50" :show-total="total => `共 ${total} 页`" />
  </f-config-provider>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import zhCN from 'ant-design-vue/lib/locale/zh_CN'
const locale = ref(zhCN)
</script>

API

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

事件

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