mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
docs(components): [pagination] format the Type value (#10894)
* docs(components): [pagination] format the Type value closed #10192 * docs(components): [pagination] format the Type value
This commit is contained in:
qiang
@@ -63,26 +63,26 @@ pagination/more-elements
|
||||
|
||||
## Attributes
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------ | -------------------------------------- |
|
||||
| small | whether to use small pagination | boolean | — | false |
|
||||
| background | whether the buttons have a background color | boolean | — | false |
|
||||
| page-size | item count of each page, supports the v-model bidirectional binding | number | — | 10 |
|
||||
| default-page-size | default initial value of page size | number | - | - |
|
||||
| total | total item count | number | — | — |
|
||||
| page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | number | — | — |
|
||||
| pager-count | number of pagers. Pagination collapses when the total page count exceeds this value | number | (odd number between 5 and 21) | 7 |
|
||||
| current-page | current page number, supports the v-model bidirectional binding | number | — | 1 |
|
||||
| default-current-page | default initial value of current-page | number | - | - |
|
||||
| layout | layout of Pagination, elements separated with a comma | string | `sizes` / `prev` / `pager` / `next` / `jumper` / `->` / `total` / `slot` | 'prev, pager, next, jumper, ->, total' |
|
||||
| page-sizes | options of item count per page | number[] | — | [10, 20, 30, 40, 50, 100] |
|
||||
| popper-class | custom class name for the page size Select's dropdown | string | — | — |
|
||||
| prev-text | text for the prev button | string | — | — |
|
||||
| prev-icon | icon for the prev button, higher priority of `prev-text` | `string \| Component` | — | ArrowLeft |
|
||||
| next-text | text for the next button | string | — | — |
|
||||
| next-icon | icon for the next button, higher priority of `next-text` | `string \| Component` | — | ArrowRight |
|
||||
| disabled | whether Pagination is disabled | boolean | — | false |
|
||||
| hide-on-single-page | whether to hide when there's only one page | boolean | — | - |
|
||||
| Name | Description | Type | Default |
|
||||
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------ |
|
||||
| small | whether to use small pagination | ^[boolean] | false |
|
||||
| background | whether the buttons have a background color | ^[boolean] | false |
|
||||
| page-size / v-model:page-size | item count of each page | ^[number] | 10 |
|
||||
| default-page-size | default initial value of page size | ^[number] | - |
|
||||
| total | total item count | ^[number] | — |
|
||||
| page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | ^[number] | — |
|
||||
| pager-count | number of pagers. Pagination collapses when the total page count exceeds this value | ^[number]`5 \| 7 \| 9 \| 11 \| 13 \| 15 \| 17 \| 19 \| 21` | 7 |
|
||||
| current-page / v-model:current-page | current page number | ^[number] | 1 |
|
||||
| default-current-page | default initial value of current-page | ^[number] | - |
|
||||
| layout | layout of Pagination, elements separated with a comma | ^[string]`string (consists of sizes, prev, pager, next, jumper, ->, total, slot)` | prev, pager, next, jumper, ->, total |
|
||||
| page-sizes | options of item count per page | ^[array]`number[]` | [10, 20, 30, 40, 50, 100] |
|
||||
| popper-class | custom class name for the page size Select's dropdown | ^[string] | — |
|
||||
| prev-text | text for the prev button | ^[string] | — |
|
||||
| prev-icon | icon for the prev button, higher priority of `prev-text` | ^[string] / ^[Component] | ArrowLeft |
|
||||
| next-text | text for the next button | ^[string] | — |
|
||||
| next-icon | icon for the next button, higher priority of `next-text` | ^[string] / ^[Component] | ArrowRight |
|
||||
| disabled | whether Pagination is disabled | ^[boolean] | false |
|
||||
| hide-on-single-page | whether to hide when there's only one page | ^[boolean] | - |
|
||||
|
||||
:::warning
|
||||
|
||||
@@ -96,12 +96,12 @@ We'll detect some deprecated usages, if your pagination don't appeared or worked
|
||||
|
||||
## Events
|
||||
|
||||
| Name | Description | Parameters |
|
||||
| -------------- | ----------------------------------------------------------------- | -------------------- |
|
||||
| size-change | triggers when `page-size` changes | the new page size |
|
||||
| current-change | triggers when `current-page` changes | the new current page |
|
||||
| prev-click | triggers when the prev button is clicked and current page changes | the new current page |
|
||||
| next-click | triggers when the next button is clicked and current page changes | the new current page |
|
||||
| Name | Description | Type |
|
||||
| -------------- | ----------------------------------------------------------------- | ------------------------------------ |
|
||||
| size-change | triggers when `page-size` changes | ^[Function]`(value: number) => void` |
|
||||
| current-change | triggers when `current-page` changes | ^[Function]`(value: number) => void` |
|
||||
| prev-click | triggers when the prev button is clicked and current page changes | ^[Function]`(value: number) => void` |
|
||||
| next-click | triggers when the next button is clicked and current page changes | ^[Function]`(value: number) => void` |
|
||||
|
||||
:::warning
|
||||
|
||||
@@ -111,6 +111,6 @@ Events above are not recommended(but are still supported for compatible reason),
|
||||
|
||||
## Slots
|
||||
|
||||
| Name | Description |
|
||||
| ---- | ------------------------------------------------------------------- |
|
||||
| — | custom content. To use this, you need to declare `slot` in `layout` |
|
||||
| Name | Description |
|
||||
| ------- | ------------------------------------------------------------------- |
|
||||
| default | custom content. To use this, you need to declare `slot` in `layout` |
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
debugWarn,
|
||||
definePropType,
|
||||
iconPropType,
|
||||
isNumber,
|
||||
mutable,
|
||||
} from '@element-plus/utils'
|
||||
import { useLocale, useNamespace } from '@element-plus/hooks'
|
||||
@@ -45,17 +46,38 @@ type LayoutKey =
|
||||
| 'slot'
|
||||
|
||||
export const paginationProps = buildProps({
|
||||
/**
|
||||
* @description total item count
|
||||
*/
|
||||
total: Number,
|
||||
/**
|
||||
* @description options of item count per page
|
||||
*/
|
||||
pageSize: Number,
|
||||
/**
|
||||
* @description default initial value of page size
|
||||
*/
|
||||
defaultPageSize: Number,
|
||||
/**
|
||||
* @description current page number
|
||||
*/
|
||||
currentPage: Number,
|
||||
/**
|
||||
* @description default initial value of current-page
|
||||
*/
|
||||
defaultCurrentPage: Number,
|
||||
/**
|
||||
* @description total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required
|
||||
*/
|
||||
pageCount: Number,
|
||||
/**
|
||||
* @description number of pagers. Pagination collapses when the total page count exceeds this value
|
||||
*/
|
||||
pagerCount: {
|
||||
type: Number,
|
||||
validator: (value: unknown) => {
|
||||
return (
|
||||
typeof value === 'number' &&
|
||||
isNumber(value) &&
|
||||
Math.trunc(value) === value &&
|
||||
value > 4 &&
|
||||
value < 22 &&
|
||||
@@ -64,50 +86,83 @@ export const paginationProps = buildProps({
|
||||
},
|
||||
default: 7,
|
||||
},
|
||||
/**
|
||||
* @description layout of Pagination, elements separated with a comma
|
||||
*/
|
||||
layout: {
|
||||
type: String,
|
||||
default: (
|
||||
['prev', 'pager', 'next', 'jumper', '->', 'total'] as LayoutKey[]
|
||||
).join(', '),
|
||||
},
|
||||
/**
|
||||
* @description item count of each page
|
||||
*/
|
||||
pageSizes: {
|
||||
type: definePropType<number[]>(Array),
|
||||
default: () => mutable([10, 20, 30, 40, 50, 100] as const),
|
||||
},
|
||||
/**
|
||||
* @description custom class name for the page size Select's dropdown
|
||||
*/
|
||||
popperClass: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description text for the prev button
|
||||
*/
|
||||
prevText: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description icon for the prev button, higher priority of `prev-text`
|
||||
*/
|
||||
prevIcon: {
|
||||
type: iconPropType,
|
||||
default: () => ArrowLeft,
|
||||
},
|
||||
/**
|
||||
* @description text for the next button
|
||||
*/
|
||||
nextText: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description icon for the next button, higher priority of `next-text`
|
||||
*/
|
||||
nextIcon: {
|
||||
type: iconPropType,
|
||||
default: () => ArrowRight,
|
||||
},
|
||||
/**
|
||||
* @description whether to use small pagination
|
||||
*/
|
||||
small: Boolean,
|
||||
/**
|
||||
* @description whether the buttons have a background color
|
||||
*/
|
||||
background: Boolean,
|
||||
/**
|
||||
* @description whether Pagination is disabled
|
||||
*/
|
||||
disabled: Boolean,
|
||||
/**
|
||||
* @description whether to hide when there's only one page
|
||||
*/
|
||||
hideOnSinglePage: Boolean,
|
||||
} as const)
|
||||
export type PaginationProps = ExtractPropTypes<typeof paginationProps>
|
||||
|
||||
export const paginationEmits = {
|
||||
'update:current-page': (val: number) => typeof val === 'number',
|
||||
'update:page-size': (val: number) => typeof val === 'number',
|
||||
'size-change': (val: number) => typeof val === 'number',
|
||||
'current-change': (val: number) => typeof val === 'number',
|
||||
'prev-click': (val: number) => typeof val === 'number',
|
||||
'next-click': (val: number) => typeof val === 'number',
|
||||
'update:current-page': (val: number) => isNumber(val),
|
||||
'update:page-size': (val: number) => isNumber(val),
|
||||
'size-change': (val: number) => isNumber(val),
|
||||
'current-change': (val: number) => isNumber(val),
|
||||
'prev-click': (val: number) => isNumber(val),
|
||||
'next-click': (val: number) => isNumber(val),
|
||||
}
|
||||
export type PaginationEmits = typeof paginationEmits
|
||||
|
||||
|
||||
Reference in New Issue
Block a user