Transfer

Basic usage

Data is passed to Transfer via the data attribute. The data needs to be an object array, and each object should have these attributes: key being the identification of the data item, label being the displayed text, and disabled indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to v-model, and the value of that variable is an array of target item keys. So, if you don't want the target list be initially empty, you can initialize the v-model with an array.

Filterable

You can search and filter data items.

Set the filterable attribute to true to enable filter mode. By default, if the data item label contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the filter-method attribute. It takes a method and passes search keyword and each data item to it whenever the keyword changes. For a certain data item, if the method returns true, it will be included in the result list.

Customizable

You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.

Use titles, button-texts, render-content and format to respectively customize list titles, button texts, render function for data items, checking status texts in list header. Plus, you can also use scoped slot to customize data items. For list footer contents, two named slots are provided: left-footer and right-footer. Plus, if you want some items initially checked, you can use left-default-checked and right-default-checked. Finally, this example demonstrate the change event. Note that this demo can't run in JSFiddle because it doesn't support JSX syntax. In a real project, render-content will work if relevant dependencies are correctly configured.

vue

<template>
  <p style="text-align: center; margin: 0 0 20px">
    Customize data items using render-content
  </p>
  <div style="text-align: center">
    <el-transfer
      v-model="leftValue"
      style="text-align: left; display: inline-block"
      filterable
      :left-default-checked="[2, 3]"
      :right-default-checked="[1]"
      :render-content="renderFunc"
      :titles="['Source', 'Target']"
      :button-texts="['To left', 'To right']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}',
      }"
      :data="data"
      @change="handleChange"
    >
      <template #left-footer>
        <el-button class="transfer-footer" size="small">Operation</el-button>
      </template>
      <template #right-footer>
        <el-button class="transfer-footer" size="small">Operation</el-button>
      </template>
    </el-transfer>
    <p style="text-align: center; margin: 50px 0 20px">
      Customize data items using scoped slot
    </p>
    <div style="text-align: center">
      <el-transfer
        v-model="rightValue"
        style="text-align: left; display: inline-block"
        filterable
        :left-default-checked="[2, 3]"
        :right-default-checked="[1]"
        :titles="['Source', 'Target']"
        :button-texts="['To left', 'To right']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}',
        }"
        :data="data"
        @change="handleChange"
      >
        <template #default="{ option }">
          <span>{{ option.key }} - {{ option.label }}</span>
        </template>
        <template #left-footer>
          <el-button class="transfer-footer" size="small">Operation</el-button>
        </template>
        <template #right-footer>
          <el-button class="transfer-footer" size="small">Operation</el-button>
        </template>
      </el-transfer>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { VNode, VNodeProps } from 'vue'

interface Option {
  key: number
  label: string
  disabled: boolean
}

const generateData = (): Option[] => {
  const data: Option[] = []
  for (let i = 1; i <= 15; i++) {
    data.push({
      key: i,
      label: `Option ${i}`,
      disabled: i % 4 === 0,
    })
  }
  return data
}

const data = ref(generateData())
const rightValue = ref([1])
const leftValue = ref([1])

const renderFunc = (
  h: (type: string, props: VNodeProps | null, children?: string) => VNode,
  option: Option
) => {
  return h('span', null, option.label)
}
const handleChange = (
  value: number[] | string[],
  direction: 'left' | 'right',
  movedKeys: string[] | number[]
) => {
  console.log(value, direction, movedKeys)
}
</script>

<style>
.transfer-footer {
  margin-left: 15px;
  padding: 6px 5px;
}
</style>

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.

The data items in this example do not have keys or labels, instead they have values and descs. So you need to set aliases for key and label.

Transfer API

Transfer 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

Transfer 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`

Transfer Slots

Name	Description
default	Custom content for data items. The scope parameter is `{ option }`
left-footer	content of left list footer
right-footer	content of right list footer

Transfer Exposes

Name	Description	Type
clearQuery	clear the filter keyword of a certain panel	`Function`
leftPanel	left panel ref	`object`
rightPanel	right panel ref	`object`

Transfer Panel API

Transfer Panel Exposes

Name	Description	Type
query	filter keyword	`string`

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
}