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