mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
docs(components): [transfer] use new display tag (#13033)
* docs(components): [transfer] use new display tag * docs(components): [transfer] update TransferKey to Array<string|number> * docs(components): [transfer] directly specify type for TransferDataItem
This commit is contained in:
wzc520pyfm
@@ -43,43 +43,78 @@ transfer/prop-alias
|
||||
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
## API
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------------------------- | ------------------------------------------------------------------------- |
|
||||
| model-value / v-model | binding value | array | — | — |
|
||||
| data | data source | `Array<{ key, label, disabled }>` | — | [ ] |
|
||||
| filterable | whether Transfer is filterable | boolean | — | false |
|
||||
| filter-placeholder | placeholder for the filter input | string | — | Enter keyword |
|
||||
| filter-method | custom filter method | function | — | — |
|
||||
| target-order | order strategy for elements in the target list. If set to `original`, the elements will keep the same order as the data source. If set to `push`, the newly added elements will be pushed to the bottom. If set to `unshift`, the newly added elements will be inserted on the top | string | original / push / unshift | original |
|
||||
| titles | custom list titles | array | — | ['List 1', 'List 2'] |
|
||||
| button-texts | custom button texts | array | — | [ ] |
|
||||
| render-content | custom render function for data items | function(h, option) | — | — |
|
||||
| format | texts for checking status in list header | `{ noChecked, hasChecked }` | — | `{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }` |
|
||||
| props | prop aliases for data source | `{ key, label, disabled }` | — | — |
|
||||
| left-default-checked | key array of initially checked data items of the left list | array | — | [ ] |
|
||||
| right-default-checked | key array of initially checked data items of the right list | array | — | [ ] |
|
||||
| validate-event | whether to trigger form validation | boolean | - | true |
|
||||
### Attributes
|
||||
|
||||
## Slots
|
||||
| Name | Description | Type | Default |
|
||||
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | -------- |
|
||||
| model-value / v-model | binding value | ^[object]`Array<string \| number>` | [] |
|
||||
| data | data source | ^[object]`Record<string, any>[]` | [] |
|
||||
| filterable | whether Transfer is filterable | ^[boolean] | false |
|
||||
| filter-placeholder | placeholder for the filter input | ^[string] | — |
|
||||
| filter-method | custom filter method | ^[Function]`(query: string, item: Record<string, any>) => boolean` | — |
|
||||
| target-order | order strategy for elements in the target list. If set to `original`, the elements will keep the same order as the data source. If set to `push`, the newly added elements will be pushed to the bottom. If set to `unshift`, the newly added elements will be inserted on the top | ^[enum]`'original' \| 'push' \| 'unshift'` | original |
|
||||
| titles | custom list titles | ^[object]`[string, string]` | [] |
|
||||
| button-texts | custom button texts | ^[object]`[string, string]` | [] |
|
||||
| render-content | custom render function for data items | ^[object]`renderContent` | — |
|
||||
| format | texts for checking status in list header | ^[object]`TransferFormat` | {} |
|
||||
| props | prop aliases for data source | ^[object]`TransferPropsAlias` | — |
|
||||
| left-default-checked | key array of initially checked data items of the left list | ^[object]`Array<string \| number>` | [] |
|
||||
| right-default-checked | key array of initially checked data items of the right list | ^[object]`Array<string \| number>` | [] |
|
||||
| validate-event | whether to trigger form validation | ^[boolean] | true |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description | Type |
|
||||
| ------------------ | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
|
||||
| change | triggers when data items change in the right list | ^[Function]`(value: TransferKey[], direction: TransferDirection, movedKeys: TransferKey[]) => void` |
|
||||
| left-check-change | triggers when end user changes the checked state of any data item in the left list | ^[Function]`(value: TransferKey[], movedKeys?: TransferKey[]) => void` |
|
||||
| right-check-change | triggers when end user changes the checked state of any data item in the right list | ^[Function]`(value: TransferKey[], movedKeys?: TransferKey[]) => void` |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
| ------------ | ---------------------------------------------------------------- |
|
||||
| — | Custom content for data items. The scope parameter is { option } |
|
||||
| default | Custom content for data items. The scope parameter is { option } |
|
||||
| left-footer | content of left list footer |
|
||||
| right-footer | content of right list footer |
|
||||
|
||||
## Methods
|
||||
### Exposes
|
||||
|
||||
| Method | Description | Parameters |
|
||||
| ---------- | ------------------------------------------- | ---------------- |
|
||||
| clearQuery | clear the filter keyword of a certain panel | 'left' / 'right' |
|
||||
| Method | Description | Type |
|
||||
| ---------- | ------------------------------------------- | ----------------------------------------------- |
|
||||
| clearQuery | clear the filter keyword of a certain panel | ^[Function]`(which: TransferDirection) => void` |
|
||||
|
||||
## Events
|
||||
## Type Declarations
|
||||
|
||||
| Name | Description | Parameters |
|
||||
| ------------------ | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
|
||||
| change | triggers when data items change in the right list | key array of current data items in the right list, transfer direction (left or right), moved item keys |
|
||||
| left-check-change | triggers when end user changes the checked state of any data item in the left list | key array of currently checked items, key array of items whose checked state have changed |
|
||||
| right-check-change | triggers when end user changes the checked state of any data item in the right list | key array of currently checked items, key array of items whose checked state have changed |
|
||||
<details>
|
||||
<summary>Show declarations</summary>
|
||||
|
||||
```ts
|
||||
import type { h as H, VNode } from 'vue'
|
||||
|
||||
type TransferKey = string | number
|
||||
|
||||
type TransferDirection = 'left' | 'right'
|
||||
|
||||
type TransferDataItem = Record<string, any>
|
||||
|
||||
type renderContent = (
|
||||
h: typeof H,
|
||||
option: TransferDataItem
|
||||
) => VNode | VNode[]
|
||||
|
||||
interface TransferFormat {
|
||||
noChecked?: string
|
||||
hasChecked?: string
|
||||
}
|
||||
|
||||
interface TransferPropsAlias {
|
||||
label?: string
|
||||
key?: string
|
||||
disabled?: string
|
||||
}
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@@ -40,44 +40,80 @@ export const LEFT_CHECK_CHANGE_EVENT = 'left-check-change'
|
||||
export const RIGHT_CHECK_CHANGE_EVENT = 'right-check-change'
|
||||
|
||||
export const transferProps = buildProps({
|
||||
/**
|
||||
* @description data source
|
||||
*/
|
||||
data: {
|
||||
type: definePropType<TransferDataItem[]>(Array),
|
||||
default: () => [],
|
||||
},
|
||||
/**
|
||||
* @description custom list titles
|
||||
*/
|
||||
titles: {
|
||||
type: definePropType<[string, string]>(Array),
|
||||
default: () => [],
|
||||
},
|
||||
/**
|
||||
* @description custom button texts
|
||||
*/
|
||||
buttonTexts: {
|
||||
type: definePropType<[string, string]>(Array),
|
||||
default: () => [],
|
||||
},
|
||||
/**
|
||||
* @description placeholder for the filter input
|
||||
*/
|
||||
filterPlaceholder: String,
|
||||
/**
|
||||
* @description custom filter method
|
||||
*/
|
||||
filterMethod: {
|
||||
type: definePropType<(query: string, item: TransferDataItem) => boolean>(
|
||||
Function
|
||||
),
|
||||
},
|
||||
/**
|
||||
* @description key array of initially checked data items of the left list
|
||||
*/
|
||||
leftDefaultChecked: {
|
||||
type: definePropType<TransferKey[]>(Array),
|
||||
default: () => [],
|
||||
},
|
||||
/**
|
||||
* @description key array of initially checked data items of the right list
|
||||
*/
|
||||
rightDefaultChecked: {
|
||||
type: definePropType<TransferKey[]>(Array),
|
||||
default: () => [],
|
||||
},
|
||||
/**
|
||||
* @description custom render function for data items
|
||||
*/
|
||||
renderContent: {
|
||||
type: definePropType<renderContent>(Function),
|
||||
},
|
||||
/**
|
||||
* @description binding value
|
||||
*/
|
||||
modelValue: {
|
||||
type: definePropType<TransferKey[]>(Array),
|
||||
default: () => [],
|
||||
},
|
||||
/**
|
||||
* @description texts for checking status in list header
|
||||
*/
|
||||
format: {
|
||||
type: definePropType<TransferFormat>(Object),
|
||||
default: () => ({}),
|
||||
},
|
||||
/**
|
||||
* @description whether Transfer is filterable
|
||||
*/
|
||||
filterable: Boolean,
|
||||
/**
|
||||
* @description prop aliases for data source
|
||||
*/
|
||||
props: {
|
||||
type: definePropType<TransferPropsAlias>(Object),
|
||||
default: () =>
|
||||
@@ -87,11 +123,17 @@ export const transferProps = buildProps({
|
||||
disabled: 'disabled',
|
||||
} as const),
|
||||
},
|
||||
/**
|
||||
* @description order strategy for elements in the target list. If set to `original`, the elements will keep the same order as the data source. If set to `push`, the newly added elements will be pushed to the bottom. If set to `unshift`, the newly added elements will be inserted on the top
|
||||
*/
|
||||
targetOrder: {
|
||||
type: String,
|
||||
values: ['original', 'push', 'unshift'],
|
||||
default: 'original',
|
||||
},
|
||||
/**
|
||||
* @description whether to trigger form validation
|
||||
*/
|
||||
validateEvent: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
|
||||
Reference in New Issue
Block a user