Basic usage


You can search and filter data items.


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.



model-value / v-modelbinding valueobject[]
datadata sourceobject[]
filterablewhether Transfer is filterablebooleanfalse
filter-placeholderplaceholder for the filter inputstring
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 topenumoriginal
titlescustom list titlesobject[]
button-textscustom button textsobject[]
render-contentcustom render function for data itemsobject
formattexts for checking status in list headerobject{}
propsprop aliases for data sourceobject
left-default-checkedkey array of initially checked data items of the left listobject[]
right-default-checkedkey array of initially checked data items of the right listobject[]
validate-eventwhether to trigger form validationbooleantrue


changetriggers when data items change in the right listFunction
left-check-changetriggers when end user changes the checked state of any data item in the left listFunction
right-check-changetriggers when end user changes the checked state of any data item in the right listFunction


defaultCustom content for data items. The scope parameter is
left-footercontent of left list footer
right-footercontent of right list footer


clearQueryclear the filter keyword of a certain panelFunction

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