Transfer

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.

Attributes

AttributeDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding valuearray
datadata sourcearray[{ key, label, disabled }][ ]
filterablewhether Transfer is filterablebooleanfalse
filter-placeholderplaceholder for the filter inputstringEnter keyword
filter-methodcustom filter methodfunction
target-orderorder 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 topstringoriginal / push / unshiftoriginal
titlescustom list titlesarray['List 1', 'List 2']
button-textscustom button textsarray[ ]
render-contentcustom render function for data itemsfunction(h, option)
formattexts for checking status in list headerobject{noChecked, hasChecked}{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }
propsprop aliases for data sourceobject{key, label, disabled}
left-default-checkedkey array of initially checked data items of the left listarray[ ]
right-default-checkedkey array of initially checked data items of the right listarray[ ]

Slots

NameDescription
Custom content for data items. The scope parameter is { option }
left-footercontent of left list footer
right-footercontent of right list footer

Methods

MethodDescriptionParameters
clearQueryclear the filter keyword of a certain panel'left' / 'right'

Events

Event NameDescriptionParameters
changetriggers when data items change in the right listkey array of current data items in the right list, transfer direction (left or right), moved item keys
left-check-changetriggers when end user changes the checked state of any data item in the left listkey array of currently checked items, key array of items whose checked state have changed
right-check-changetriggers when end user changes the checked state of any data item in the right listkey array of currently checked items, key array of items whose checked state have changed