Transfer

Transfer component provides two side-by-side panels that allow users to move items between them. It is commonly used for permission assignment, role association, and similar scenarios.

---

Basic Usage

Pass options via :data prop, bind the selected keys array with v-model. The disabled property in options disables that item.

<script setup>
interface Option {
  key: number
  label: string
  disabled?: boolean
}

const data = ref<Option[]>(
  Array.from({ length: 15 }, (_, i) => ({
    key: i + 1,
    label: `Option ${i + 1}`,
    disabled: (i + 1) % 4 === 0,
  }))
)
const value = ref<number[]>([])
</script>

<TTransfer v-model="value" :data="data" />

---

With Initial Values

Assign initial values to v-model, and the right panel will contain the specified items by default.

<script setup>
interface Option {
  key: number
  label: string
  disabled?: boolean
}

const data = ref<Option[]>(
  Array.from({ length: 15 }, (_, i) => ({
    key: i + 1,
    label: `Option ${i + 1}`,
    disabled: (i + 1) % 4 === 0,
  }))
)
const value = ref<number[]>([2, 4, 6, 8])
</script>

<TTransfer v-model="value" :data="data" />

---

Filterable

Set filterable to enable search filtering. By default it matches by the label field; use filter-method for custom logic.

<TTransfer v-model="value" :data="data" filterable />

---

Keep Source Mode

Set the keep-source prop to keep all items visible in the left panel. Items moved to the right are shown as checked+disabled in the left panel, and become selectable again when moved back.

<TTransfer v-model="value" :data="data" keep-source />

---

API

Props

Prop	Type	Default	Description
data	TransferOption[]	[]	All options
model-value / v-model	(string | number)[]	[]	Selected keys array
filterable	boolean	false	Enable search filtering
filter-method	(query: string, option: TransferOption) => boolean	—	Custom filter function
filter-placeholder	string	'Search'	Search input placeholder
left-title	string	'Available'	Left panel title
right-title	string	'Selected'	Right panel title
empty-text	string	'No data'	Empty state text
keep-source	boolean	false	Keep source mode: left panel always shows all items; selected items appear checked+disabled

TransferOption

Field	Type	Description
key	string | number	Unique identifier
label	string	Display text
disabled	boolean	Whether disabled

Slots

Slot	Parameters	Description
default	{ item: TransferOption, checked: boolean }	Custom item rendering