Skip to content

分页 Pagination

用于控制分页数据或者页面之间的跳转。

基础用法

基础分页用法,支持页码跳转、上下翻页。

<template>
  <bp-pagination v-model:current="page" :total="30"> </bp-pagination>
</template>

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

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

最大页码控制

通过 max-pager 控制显示的页码数量,默认为 7 个,其余省略展示。

<template>
  <bp-pagination v-model:current="page" :total="1000"> </bp-pagination>
</template>

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

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

每页条数

通过 layout 属性配置,开启每页条数配置。

<template>
  <bp-pagination v-model:current="page" :total="500" layout="prev, pager, next, sizes"> </bp-pagination>
</template>

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

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

页码跳转

通过 layout 属性配置,开启页码跳转。

<template>
  <bp-pagination v-model:current="page" :total="500" layout="prev, pager, next, jumper"> </bp-pagination>
</template>

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

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

自定义布局和文案

分页器文案和布局顺序均支持自定义。

<template>
  <bp-pagination
    v-model:current="page"
    :total="30"
    prev-text="上一页"
    next-text="下一页"
    layout="total, prev, pager, next, jumper"
  >
  </bp-pagination>
</template>

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

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

Pagination 属性

total
总数
Number
0
current(v-model)
当前页
Number
1
pageSize(v-model)
每页显示条数
Number
10
sizesList
每页显示条数的选项
Number[]
[10, 20, 50, 100]
prevText
上一页按钮文案
String
-
nextText
下一页按钮文案
String
-
layout
布局配置(拼接字符串)
Enum
prev, pager, next
maxPager
最大页码数
Number
7
totalTmpString
总条数文案
String
共 {total} 条
jumperTmpString
页码跳转文案
String
前往{jumper}
sizesTmpString
每页条数选项文案
String
{value} 条/页

Pagination 事件

page-change
页码改变触发
page
size-change
每页条数改变触发
size