docs_vue2/one/docs/en-US/components/transfer.md

Transfer

Demos

Size variants

Available size variants for the ui prop: s / m.

Without search input

Custom search

Selected values as list

API

Props

Name	Type	Default	Description
ui	string=	-	[^ui]
datasource	Array<Object>	[]	[^datasource]
searchable	boolean=	true	Whether to allow search.
filter	function=	See description	[^filter]
selected	Array=	[]	[^selected]
candidate-placeholder	string=	-	The placeholder text in the search input of the candidate panel.
selected-placeholder	string=	-	The placeholder text in the search input of the selected panel.
candidate-label	string=	-	The title of the candidates panel.
selected-label	string=	-	The title of the selected panel.
selected-show-mode	string=	'tree'	[^selected-show-mode]
keys	`string	function=`	'value'
merge-checked	string=	keep-all	[^merge-checked]

^^^ui Style variants.

+++Enum values

Value	Description
s	Small transfer.
m	Medium transfer.
+++
^^^

^^^datasource The datasource of the transfer. The type of node item is {label, value, children, ...}.

+++Properties

Name	Type	Description
label	string	The descriptive label of each item.
value	string	The value of each item.
children	Array<Object>=	The child items of each item. The item type is the same as datasource items.
+++
^^^

^^^filter The filter function. The function signature is function(from, keyword, item, index, datasource): boolean. Items that make filter function returns false will be hidden.

+++Parameters

Name	Type	Description
from	string	The source of search. Available values are 'candidate' / 'selected'. 'candidate' means search is triggered from the candidate panel, 'selected' means from the selected panel.
keyword	string	The search keyword.
item	Object	Each item in datasource.
index	number	The index of each item among its siblings.
datasource	Array<{label: string, ...}>	same as the datasource prop.
+++

+++Default value

import { includes } from 'lodash'

function (keyword, { label }) {
  return includes(label, keyword)
}

+++ ^^^

^^^selected :::badges v-model :::

The selected values which is the value array of datasource items (affected by the keys prop). ^^^

^^^selected-show-mode To specify how should items inside selected panel be displayed.

+++Enum values

Value	Description
tree	Displayed as a tree structure.
flat	Displayed as a flattened array.
+++
^^^

^^^merge-checked

Merge strategy for selected values. When all child nodes under a node are selected, you can choose to keep only the parent node, only the child nodes, or both.

+++Enumerated values

Value	Description
keep-all	The parent and child nodes will both be in the selected value.
upwards	Merge selected values as far as possible in the ancestor direction.
downwards	Merge selected values in the direction of descendants if possible.
+++
^^^

Slots

Name	Description
candidate	The candidate panel.
candidate-head	[^candidate-head]
selected-head	[^selected-head]
candidate-title	The title text of the candidate panel. Shares the same scope properties with slot candidate-head.
selected-title	The title text of the selected panel. Shares the same scope properties with slot selected-head.
candidate-no-data	The content displayed when there's no data inside the candidate panel.
selected-no-data	The content displayed when there's no data inside the selected panel.
candidate-item	[^candidate-item]
selected-item	[^selected-item]
candidate-item-label	Label text of each item inside the candidate panel. Shares the same scope properties with slot candidate-item.
selected-item-label	Label text of each item inside the selected panel. Shares the same scope properties with slot selected-item when selected-show-mode is 'tree'. Otherwise this slot specifies custom content for any item along the path for all selected leaf item and shares the same scope properties with slot candidate-item.

^^^candidate-head The head area of the candidate panel.

+++Scope properties

Name	Type	Description
count	number	The number of candidate items.
^^^

^^^selected-head The head area of the selected panel.

+++Scope properties

Name	Type	Description
count	number	The number of selected items.
^^^

^^^candidate-item The content of each item inside the candidate panel.

+++Scope properties

Name	Type	Description
label	string	The descriptive label of current item.
value	string	The value of current item.
children	Array<Object>=	The array of the child items of each item. Shares the same type with datasource items.
index	number	The index of current item among its siblings.
depth	number	The depth of current item in the tree structure.
+++
^^^

^^^selected-item The content of each item inside the selected panel.

+++Scope properties The scope properties will be the same as slot candidate-item when selected-show-mode is 'tree'. They'll be as follows when selected-show-mode is 'flat'.

Name	Type	Description
items	Array<Object>	All ancestor items from the top level down to current item. Shares the same item type with datasource items.
index	number	The index of current item among its siblings.
+++
^^^

Events

Name	Description
select	Triggered when user changes selection. The callback parameter list is (selected: Array<string>) and selected is the array of value properties of selected items.

Icons

Name	Description
checked	The checked state.
select	Select items.
remove	Remove items.
expand	Click to expand (currently being collapsed).
collapse	Click to collapse (currently being expanded).
separator	The separator between level labels when selected-show-mode is 'flat'.