Transfer
Basic usage
Filterable
You can search and filter data items.
Customizable
You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.
Prop aliases
By default, Transfer looks for key, label and disabled in a data item. If your data items have different key names, you can use the props attribute to define aliases.
API
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| model-value / v-model | binding value | object | [] |
| data | data source | object | [] |
| filterable | whether Transfer is filterable | boolean | false |
| filter-placeholder | placeholder for the filter input | string | — |
| 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 | enum | original |
| titles | custom list titles | object | [] |
| button-texts | custom button texts | object | [] |
| render-content | custom render function for data items | object | — |
| format | texts for checking status in list header | object | {} |
| props | prop aliases for data source | object | — |
| left-default-checked | key array of initially checked data items of the left list | object | [] |
| right-default-checked | key array of initially checked data items of the right list | object | [] |
| validate-event | whether to trigger form validation | boolean | true |
Events
| Name | Description | Type |
|---|---|---|
| change | triggers when data items change in the right list | Function |
| left-check-change | triggers when end user changes the checked state of any data item in the left list | Function |
| right-check-change | triggers when end user changes the checked state of any data item in the right list | Function |
Slots
| Name | Description |
|---|---|
| default | Custom content for data items. The scope parameter is |
| left-footer | content of left list footer |
| right-footer | content of right list footer |
Exposes
| Method | Description | Type |
|---|---|---|
| clearQuery | clear the filter keyword of a certain panel | Function |
Type Declarations
Show declarations
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
}