🌏 Translated with the assistance of DeepSeek and ChatGPT

Pagination

The dataset is so large it could number in the thousands.

Basic Usage

Use page to control the current page number in pagination, which supports v-model (controlled mode). When page is undefined or not passed, it operates in uncontrolled mode, and its default value can be set via defaultPage.

total sets the total number of data entries. Together with pageSize, it is used to calculate the total number of pages for pagination.

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>

Basic usage

When the simple property is set to true, the page selector switches to simple mode.

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

Page slot

Use pageSlot to control how many page buttons are shown. This property is designed to prevent accidental changes caused by fluctuating button counts and is inspired by 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>

Variants

Pagination supports four variants: 'ghost' (default), 'text', 'solid', and 'outline'. Set via the variant prop.

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>

Sizes

Pagination supports three sizes: 'medium' (default), 'small', and 'large'. Set via the size prop.

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>

Page size

Use pageSize to control the number of items per page (supports v-model — controlled mode). When pageSize is undefined or not provided, the component is uncontrolled; use defaultPageSize to set its initial value.

Use showSize to toggle the page size selector.

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

total sets the total number of items. showTotal toggles the display of the total. Use the totalLabel prop or the total-label slot to customize the total text.

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>

Jumper

showJumper toggles the page jumper control. Use the jumperLabel prop or the jumper-label slot to customize its 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>

Hide When Only One Page

hideWhenSinglePage configures whether to hide the pagination controls when there is one page or less.

Hide

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

Attribute	Type	Optional	Default	Description	Version
page	number | null	True		Current page number (controlled mode).	0.1.0
defaultPage	number | null	True	1	Default value of current page number (uncontrolled mode).	0.1.0
pageSize	number | null	True		Current page size (controlled mode).	0.1.0
defaultPageSize	number | null	True	10	Default value of current page size (uncontrolled mode).	0.1.0
total	number	True	0	Total number of data.	0.1.0
pageSlot	number	True	9	Page slot, the number of page number buttons to display, minimum value is 5.	0.1.0
disabled	false	True	false	Whether the component is disabled.	0.1.0
variant	'text' | 'solid' | 'outline' | 'ghost'	True	'ghost'	Component style variant.	0.1.0
size	'small' | 'medium' | 'large'	True	'medium'	Component size.	0.1.0
simple	boolean	True	false	Whether the page number selector is in simple mode.	0.1.0
pageSizeOptions	(number | PaginationOption)[]	True	[10, 20, 30, 40, 50, 100]	Options for page size selector.	0.1.0
showSize	boolean	True	false	Whether to display the page size selector.	0.1.0
showTotal	boolean	True	false	Whether to display the total data count.	0.1.0
showTotal	boolean	True	false	Whether to display the total data count.	0.1.0
jumperLabel	string	True		Label text for the page jumper control.	0.1.0
totalLabel	string	True		Label text for the total data count.	0.1.0
hideWhenSinglePage	boolean	True	false		0.1.0
itemsOrder	('page' | 'size' | 'jumper' | 'total')[]	True	['total', 'page', 'size', 'jumper']	Display order of the component parts.	0.1.0
pollSizeChange	boolean	True	false	Enable polling for component size changes, which may affect performance. Commonly used when the size is affected by container elements, leading to canvas drawing abnormalities. This property will affect internal subcomponents such as Input and Select.	0.1.0

PaginationEvents

Event	Parameter	Description	Version
update:page	value: number	Callback for updating page.	0.1.0
pageChange	value: number	Callback for page change.	0.1.0
movePrev	page: number, event: MouseEvent	Callback for clicking the left arrow button to move to the previous page.	0.1.0
moveNext	page: number, event: MouseEvent	Callback for clicking the right arrow button to move to the next page.	0.1.0
pageSelect	page: number, option: number | string, event: MouseEvent	Callback for clicking a page number button to select a page.	0.1.0
pageCommit	page: number, event: Event	Callback for changing the page number by modifying the input box in simple mode.	0.1.0
update:pageSize	value: number	Callback for updating pageSize.	0.1.0
pageSizeChange	value: number	Callback for pageSize change.	0.1.0
pageJump	page: number, event: Event	Callback for changing the page number by modifying the input box in the page jumper control.	0.1.0

PaginationSlots

Slot	Parameter	Description	Version
total-label	total: number	Label text for displaying total data count.	0.1.0
jumper-label		Label text for the page jumper control.	0.1.0

Option

export interface Option<T = any> {
	value: T
	label: string
}

PaginationOption

export interface PaginationOption extends Option<number> {
	disabled?: boolean
	key?: string | number | symbol
}