穿梭框 Transfer

对应 Arco Transfer，使用灰色表头与上下排列的圆形操作按钮。 属性用法见 Element Plus 文档。

基础穿梭

选中条目后点击中间按钮，在两个列表间移动。

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>

搜索过滤

filterable 对应 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>

与 Arco 的差异

• 计数文本的空格、搜索图标位置和空列表展示保留 Element Plus。