Pagination

Navigate multi-page datasets.

Basic Usage

• 共 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

size supports mini, small, default, and 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>

Custom Layout

Compose layout with total, prev, pager, next, sizes, and jumper.

Custom layout

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

With total and jumper

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

Full layout

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

<template>
  <div>
    <div class="label">Custom layout</div>
    <bp-pagination :total="200" :page-size="10" v-model="current" layout="prev, pager, next" />
    <div class="label" style="margin-top: 16px">With total and jumper</div>
    <bp-pagination :total="200" :page-size="10" v-model="current" layout="total, prev, pager, next, jumper" />
    <div class="label" style="margin-top: 16px">Full layout</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 Props

layout	Layout config	String	total, prev, pager, next, sizes, jumper	-
disabled	Whether disabled	Boolean	-	-
size	Size	InputSize	default	-
total	Total	Number	-	-
current	Current page	Number	1	-
page-size	Page size	Number	10	-
sizes-list	Page size options	Array	[10, 20, 50, 100]	-
prev-text	Previous page text	String	-	-
next-text	Next page text	String	-	-
max-pager	Max pager count	Number	7	-
total-tmp-string	Total text template	String	Total {total} items	-
jumper-tmp-string	Jumper text template	String	Go to {jumper}	-
sizes-tmp-string	Page size text template	String	{value} / page	-

Pagination Events

change	Triggered when page changes	page: number	-
size-change	Triggered when page size changes	pageSize: number	-