分页 Pagination

用于数据分页展示，支持自定义布局、多种尺寸、页码跳转和每页条数切换。

基础用法

通过 total 设置总条数，page-size 设置每页条数，v-model 绑定当前页。

• 共 30 条
• 1
• 2
• 3
• 前往

<template>
  <bp-pagination :total="30" :page-size="10" :current></bp-pagination>
</template>

<script setup lang="ts">
import { ref } from "vue";
const current = ref(1);
</script>

尺寸

通过 size 属性设置尺寸，支持 mini、small、default、large。

• 共 30 条
• 1
• 2
• 3
• 前往

• 共 30 条
• 1
• 2
• 3
• 前往

• 共 30 条
• 1
• 2
• 3
• 前往

• 共 30 条
• 1
• 2
• 3
• 前往

<template>
  <bp-space type="vertical">
    <bp-pagination
      v-for="size in sizesList"
      :key="size"
      :total="30"
      :page-size="10"
      :current="1"
      :size
    ></bp-pagination>
  </bp-space>
</template>

<script setup lang="ts">
const sizesList = ["mini", "small", "default", "large"];
</script>

自定义布局

通过 layout 属性自定义分页布局，可选值：total、prev、pager、next、sizes、jumper。

自定义布局

• 1
• 2
• 3
• 4
• 5
• 6
• 20

带总数和跳转

• 共 200 条
• 1
• 2
• 3
• 4
• 5
• 6
• 20
• 前往

完整布局

• 共 200 条
• 1
• 2
• 3
• 4
• 5
• 6
• 20
• 前往

<template>
  <div>
    <div class="label">自定义布局</div>
    <bp-pagination :total="200" :page-size="10" v-model="current" layout="prev, pager, next" />
    <div class="label" style="margin-top: 16px">带总数和跳转</div>
    <bp-pagination :total="200" :page-size="10" v-model="current" layout="total, prev, pager, next, jumper" />
    <div class="label" style="margin-top: 16px">完整布局</div>
    <bp-pagination :total="200" :page-size="10" v-model="current" />
  </div>
</template>

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

const current = ref(1);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

Pagination 属性

layout	布局配置	String	total, prev, pager, next, sizes, jumper	-
disabled	是否禁用	Boolean	-	-
size	尺寸	InputSize	default	-
total	总条数	Number	-	-
current	当前页	Number	1	-
page-size	每页条数	Number	10	-
sizes-list	可选页数列表	Array	[10, 20, 50, 100]	-
prev-text	上一页文本	String	-	-
next-text	下一页文本	String	-	-
max-pager	最多页码数	Number	7	-
total-tmp-string	总数文案	String	共 {total} 条	-
jumper-tmp-string	跳转文案	String	前往{jumper}	-
sizes-tmp-string	分页大小文案	String	{value} 条/页	-

Pagination 事件

change	页码变化	page: number	-
size-change	分页大小变化	pageSize: number	-