分页
数据之大不知其几千条也。
基础使用
使用 page 控制分页当前页码，支持 v-model（受控模式）。page 为 undefined 或者没有传入时，为非受控模式，可以通过 defaultPage 设置其默认值。
total 设置当前数据总数，和 pageSize 一起，计算出分页的总页数。
1
2
3
4
5
6
7
...
50
<template>
<px-pagination :total="500" v-model:page="page"></px-pagination>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const page = ref(1)
</script>简单模式
simple 属性为 true 时，页码选择器变为简单模式。
/ 50
<template>
<px-pagination :total="500" simple v-model:page="page"></px-pagination>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const page = ref(1)
</script>页面槽位
使用 pageSlot 控制展示的页面选择按钮数量。设计这个属性主要是为了防止页面选择按钮数量发生变化导致的误操作，这在其他组件库的分页组件中是比较常见的问题。这个属性设计参考了 Naive UI。
1
2
3
4
5
...
50
1
2
3
4
5
6
7
...
50
1
2
3
4
5
6
7
8
9
...
50
<template>
<px-space direction="vertical">
<px-pagination :total="500" :page-slot="7" v-model:page="page"></px-pagination>
<px-pagination :total="500" v-model:page="page"></px-pagination>
<px-pagination :total="500" :page-slot="11" v-model:page="page"></px-pagination>
</px-space>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const page = ref(1)
</script>样式变体
分页组件有 'ghost'（默认）、'text'、'solid'、'outline' 四种样式变体，通过 variant 属性设置。
1
2
3
4
5
6
7
...
50
1
2
3
4
5
6
7
...
50
1
2
3
4
5
6
7
...
50
1
2
3
4
5
6
7
...
50
<template>
<px-space direction="vertical">
<px-pagination :total="500" v-model:page="page"></px-pagination>
<px-pagination :total="500" variant="text" v-model:page="page"></px-pagination>
<px-pagination :total="500" variant="solid" v-model:page="page"></px-pagination>
<px-pagination :total="500" variant="outline" v-model:page="page"></px-pagination>
</px-space>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const page = ref(1)
</script>尺寸
分页组件有 'medium'（默认）、'small'、'large' 三种样式变体，通过 size 属性设置。
1
2
3
4
5
6
7
...
50
1
2
3
4
5
6
7
...
50
1
2
3
4
5
6
7
...
50
<template>
<px-space direction="vertical">
<px-pagination :total="500" size="small" v-model:page="page"></px-pagination>
<px-pagination :total="500" v-model:page="page"></px-pagination>
<px-pagination :total="500" size="large" v-model:page="page"></px-pagination>
</px-space>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const page = ref(1)
</script>页面容量
使用 pageSize 控制分页当前页面容量，支持 v-model（受控模式）。pageSize 为 undefined 或者没有传入时，为非受控模式，可以通过 defaultPageSize 设置其默认值。
通过 showSize 设置页面容量选择控件的显示。
1
2
3
4
5
6
7
...
50
10 / Page
<template>
<px-pagination
show-size
:total="500"
v-model:page-size="pageSize"
v-model:page="page"
></px-pagination>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const page = ref(1)
const pageSize = ref(10)
</script>数据总数
total 设置当前数据总数。showTotal 设置是否展示数据总数。通过 totalLabel 属性或者 total-label 插槽，设置数据总数展示的文本。
Here has 500 rows
1
2
3
4
5
6
7
...
50
<template>
<px-pagination :total="500" show-total v-model:page="page">
<template #total-label="{ total }"> Here has {{ total }} rows </template>
</px-pagination>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const page = ref(1)
</script>页面跳转
showJumper 设置是否展示页面跳转控件。通过 jumperLabel 属性或者 jumper-label 插槽，设置页面跳转展示的文本。
1
2
3
4
5
6
7
...
50
Go to
<template>
<px-pagination :total="500" v-model:page="page" show-jumper></px-pagination>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const page = ref(1)
</script>只有一页时隐藏
hideWhenSinglePage 配置当小于等于一页时是否隐藏分页控件。
1
<template>
<px-space direction="vertical">
<px-switch active-label="Hide" v-model="hide"></px-switch>
<px-pagination :total="1" :hideWhenSinglePage="hide"></px-pagination>
</px-space>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const hide = ref(false)
</script>API
PaginationProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| page | number | null | 是 | | 当前的页码（受控模式）。 | 0.1.0 |
| defaultPage | number | null | 是 | 1 | 当前的页码默认值（非受控模式）。 | 0.1.0 |
| pageSize | number | null | 是 | | 当前的页面容量（受控模式）。 | 0.1.0 |
| defaultPageSize | number | null | 是 | 10 | 当前的页面容量默认值（非受控模式）。 | 0.1.0 |
| total | number | 是 | 0 | 数据的总数。 | 0.1.0 |
| pageSlot | number | 是 | 9 | 页面槽位，选择页码按钮的数量，最小值为 5。 | 0.1.0 |
| disabled | false | 是 | false | 组件是否禁用。 | 0.1.0 |
| variant | 'text' | 'solid' | 'outline' | 'ghost' | 是 | 'ghost' | 组件样式变体。 | 0.1.0 |
| size | 'small' | 'medium' | 'large' | 是 | 'medium' | 组件尺寸。 | 0.1.0 |
| simple | boolean | 是 | false | 页码选择控件是否为简单模式。 | 0.1.0 |
| pageSizeOptions | (number | PaginationOption)[] | 是 | [10, 20, 30, 40, 50, 100] | 页面容量选择控件的选项。 | 0.1.0 |
| showSize | boolean | 是 | false | 是否展示页面容量选择控件。 | 0.1.0 |
| showTotal | boolean | 是 | false | 是否展示数据总数。 | 0.1.0 |
| showTotal | boolean | 是 | false | 是否展示数据总数。 | 0.1.0 |
| jumperLabel | string | 是 | | 页面跳转控件的标签文本。 | 0.1.0 |
| totalLabel | string | 是 | | 数据总数的标签文本。 | 0.1.0 |
| hideWhenSinglePage | boolean | 是 | false | 0.1.0 | |
| itemsOrder | ('page' | 'size' | 'jumper' | 'total')[] | 是 | ['total', 'page', 'size', 'jumper'] | 组件各个部分的展示顺序。 | 0.1.0 |
| pollSizeChange | boolean | 是 | false | 开启轮询组件尺寸变化，可能会影响性能，常用于被容器元素影响尺寸，进而 canvas 绘制异常的情况。该属性将会作用于内部的 Input 和 Select 等子组件。 | 0.1.0 |
PaginationEvents
| 事件 | 参数 | 描述 | 版本 |
|---|---|---|---|
| update:page | value: number | 更新 page 的回调。 | 0.1.0 |
| pageChange | value: number | page 改变的回调。 | 0.1.0 |
| movePrev | page: number, event: MouseEvent | 点击左侧箭头按钮移动页码的回调。 | 0.1.0 |
| moveNext | page: number, event: MouseEvent | 点击右侧箭头按钮移动页码的回调。 | 0.1.0 |
| pageSelect | page: number, option: number | string, event: MouseEvent | 点击选择页码按钮的回调。 | 0.1.0 |
| pageCommit | page: number, event: Event | 简单模式下，修改输入框改变页码的回调。 | 0.1.0 |
| update:pageSize | value: number | 更新 pageSize 的回调。 | 0.1.0 |
| pageSizeChange | value: number | pageSize 改变的回调。 | 0.1.0 |
| pageJump | page: number, event: Event | 页面跳转控件，修改输入框改变页码的回调。 | 0.1.0 |
PaginationSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| total-label | total: number | 展示数据总数的标签文本。 | 0.1.0 |
| jumper-label | | 页面跳转控件的标签文本。 | 0.1.0 |
Option
ts
export interface Option<T = any> {
value: T
label: string
}1
2
3
4
2
3
4
PaginationOption
ts
export interface PaginationOption extends Option<number> {
disabled?: boolean
key?: string | number | symbol
}1
2
3
4
2
3
4