Transfer

Matches Arco Transfer with light headers and vertically arranged round controls. See the Element Plus docs for props.

Basic Transfer

Select items and use the center controls to move them between lists.

Available0/6

Option 1Option 3Option 5Option 6Option 7Option 8

No data

Selected0/2

Option 2Option 4

No data

<script setup lang="ts">
import { ref } from 'vue'
const value = ref([2, 4])
const data = Array.from({ length: 8 }, (_, index) => ({ key: index + 1, label: `Option ${index + 1}`, disabled: index === 5 }))
</script>

<template>
  <div style="width: 100%; overflow-x: auto">
    <el-transfer v-model="value" :data="data" :titles="['Available', 'Selected']" />
  </div>
</template>

Filtering

Filterable matches Arco show-search.

Available0/6

Option 1Option 3Option 5Option 6Option 7Option 8

No data

Selected0/2

Option 2Option 4

No data

<script setup lang="ts">
import { ref } from 'vue'
const value = ref([2, 4])
const data = Array.from({ length: 8 }, (_, index) => ({ key: index + 1, label: `Option ${index + 1}`, disabled: index === 5 }))
</script>

<template>
  <div style="width: 100%; overflow-x: auto">
    <el-transfer v-model="value" :data="data" filterable filter-placeholder="Search options" :titles="['Available', 'Selected']" />
  </div>
</template>

Differences from Arco

• Count spacing, search-icon position and empty-list content follow Element Plus.