Transfer 穿梭框

用于在两栏之间移动元素，完成选择操作。

基础用法

通过 data 属性传入数据源，v-model 绑定已选中的值。

0/15

选项 1选项 2选项 3选项 4选项 5选项 6选项 7选项 8选项 9选项 10选项 11选项 12选项 13选项 14选项 15

0/0

暂无数据

<template>
  <ZcTransfer v-model="value" :data="transferData" />
</template>
<script setup>
import { ref } from 'vue'

const value = ref([])
const generateData = () => {
  const data = []
  for (let i = 1; i <= 15; i++) {
    data.push({
      key: i,
      label: `选项 ${i}`,
    })
  }
  return data
}
const transferData = generateData()
</script>

可搜索

设置 filterable 属性可开启搜索过滤功能。

0/13

选项 2选项 3选项 5选项 6选项 7选项 8选项 9选项 10选项 11选项 12选项 13选项 14选项 15

0/2

选项 1选项 4

<template>
  <ZcTransfer v-model="value" :data="transferData" filterable filter-placeholder="请输入搜索内容" />
</template>
<script setup>
import { ref } from 'vue'

const value = ref([1, 4])
const transferData = Array.from({ length: 15 }).map((_, i) => ({
  key: i + 1,
  label: `选项 ${i + 1}`,
}))
</script>

Transfer API

Props

参数	说明	类型	默认值
modelValue	绑定值 (v-model)	(string | number)[]	[]
data	数据源	TransferOption[]	[]
titles	自定义列表标题	string[]	['列表 1', '列表 2']
filterable	是否可搜索	boolean	false
filterPlaceholder	搜索框占位文本	string	'请输入搜索内容'
disabled	是否禁用	boolean	false

Events

事件名	说明	回调参数
change	右侧列表元素变化时触发	(value: (string | number)[])
left-check-change	左侧列表元素被选中时触发	(checked: (string | number)[])
right-check-change	右侧列表元素被选中时触发	(checked: (string | number)[])