分页 Pagination

基础用法

共 30 条
1
2
3
前往

vue

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

尺寸

共 30 条
1
2
3
前往

共 30 条
1
2
3
前往

共 30 条
1
2
3
前往

共 30 条
1
2
3
前往

vue

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

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	-

分页 Pagination ​

基础用法 ​

尺寸 ​

Pagination 属性 ​

Pagination 事件 ​

分页 Pagination

基础用法

尺寸

Pagination 属性

Pagination 事件