Pagination 分页

当数据量过多时，使用 Pagination 将数据拆分成多页展示。VISTA B 直接使用 Element Plus 的 el-pagination，常用于表格、列表、搜索结果和卡片流底部。

基础用法

设置 layout 表示需要显示的内容，用逗号分隔，布局元素会依次显示。常用元素包括 prev、pager、next、jumper、total、sizes 以及 ->。

When you have few pages

• 1
• 2
• 3
• 4
• 5

When you have more than 7 pages

• 1
• 2
• 3
• 4
• 5
• 6
• 100

<el-pagination layout="prev, pager, next" :total="50" />
<el-pagination layout="prev, pager, next" :total="1000" />

设置最大页码按钮数

默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。通过 pager-count 可以设置最大页码按钮数。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 50

<el-pagination
  :page-size="20"
  :pager-count="11"
  layout="prev, pager, next"
  :total="1000"
/>

带有背景色的分页

设置 background 可以为分页按钮添加背景色。

• 1
• 2
• 3
• 4
• 5
• 6
• 100

<el-pagination background layout="prev, pager, next" :total="1000" />

小型分页

空间有限时，可以使用 size="small"。

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

<el-pagination size="small" layout="prev, pager, next" :total="50" />
<el-pagination size="small" background layout="prev, pager, next" :total="50" />

当只有一页时隐藏分页

当只有一页时，通过 hide-on-single-page 控制是否隐藏分页。

hide-on-single-page

• 1

<script setup>
import { ref } from 'vue'

const hideOnSinglePage = ref(false)
</script>

<template>
  <el-pagination
    :hide-on-single-page="hideOnSinglePage"
    :total="5"
    layout="prev, pager, next"
  />
</template>

附加功能

根据场景需要，可以添加总条数、每页条数选择器、跳转输入框等模块。绑定 current-page 或 page-size 时，建议使用 v-model。

size:backgrounddisabled

Total item count

Total 1000

• 1
• 3
• 4
• 5
• 6
• 7
• 10

Change page size

• 1
• 3
• 4
• 5
• 6
• 7
• 10

Jump to

• 1
• 3
• 4
• 5
• 6
• 7
• 10

Go to

All combined

Total 400

• 1
• 2
• 3
• 4

Go to

未变更

<script setup>
import { ref } from 'vue'

const currentPage = ref(4)
const pageSize = ref(100)
</script>

<template>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[100, 200, 300, 400]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400"
  />
</template>

API

Pagination 属性

属性	说明	类型	默认值
size	分页大小	default / small / large	default
background	是否为分页按钮添加背景色	boolean	false
page-size / v-model:page-size	每页显示条目个数	number	空
default-page-size	每页默认条目个数，不设置时为 10	number	空
total	总条目数	number	空
page-count	总页数，total 和 page-count 设置任意一个即可显示页码	number	空
pager-count	最大页码按钮数，超过该值时会折叠	number	7
current-page / v-model:current-page	当前页数	number	空
default-current-page	默认初始页数，不设置时为 1	number	空
layout	组件布局，子组件名用逗号分隔	string	prev, pager, next, jumper, ->, total
page-sizes	每页显示个数选择器的选项	number[]	[10, 20, 30, 40, 50, 100]
append-size-to	每页条数下拉框挂载到哪个 DOM 元素	string	空
popper-class	每页显示个数选择器的下拉框类名	string	空
popper-style	每页显示个数选择器的下拉框样式	string / object	空
prev-text	替代图标显示的上一页文字	string	空
prev-icon	上一页图标，优先级高于 prev-text	string / Component	ArrowLeft
next-text	替代图标显示的下一页文字	string	空
next-icon	下一页图标，优先级高于 next-text	string / Component	ArrowRight
disabled	是否禁用分页	boolean	false
teleported	是否将下拉菜单 teleport 至 body	boolean	true
hide-on-single-page	只有一页时是否隐藏	boolean	false
small	是否使用小型分页样式，已废弃，请使用 size	boolean	false

Pagination 事件

事件名	说明	类型
size-change	page-size 改变时触发	(pageSize: number) => void
current-change	current-page 改变时触发	(currentPage: number) => void
change	current-page 或 page-size 改变时触发	(currentPage: number, pageSize: number) => void
prev-click	用户点击上一页按钮改变当前页时触发	(currentPage: number) => void
next-click	用户点击下一页按钮改变当前页时触发	(currentPage: number) => void

Pagination 插槽

插槽	说明
default	自定义内容，需要在 layout 中列出 slot

使用提醒

total 和 page-count 必须传入一个，否则组件无法判断总页数。绑定 current-page 时需要监听更新事件或使用 v-model:current-page；绑定 page-size 且 layout 包含 sizes 时，需要监听更新事件或使用 v-model:page-size。