Transfer 穿梭框

在两栏之间转移已选项，支持搜索过滤。

基础用法

待选

• 选项一
• 选项三
• 选项四
• 选项五

已选

• 选项二

<script setup>
import { ref } from 'vue'
import { DanTransfer } from '@dandan-ui/ui'

const value = ref([2])
const data = [
  { key: 1, label: '选项一' },
  { key: 2, label: '选项二' },
  { key: 3, label: '选项三' },
  { key: 4, label: '选项四', disabled: true },
  { key: 5, label: '选项五' },
]
</script>

<template>
  <DanTransfer
    v-model="value"
    :data="data"
    filterable
    :titles="['待选', '已选']"
  />
</template>

API

Props

属性	说明	类型	默认值
modelValue / v-model	右侧已选 key 列表	(string | number)[]	[]
data	数据源	TransferItem[]	[]
titles	左右标题	[string, string]	['列表 1', '列表 2']
filterable	是否可搜索	boolean	false
disabled	是否禁用	boolean	false

Events

事件	说明	参数
update:modelValue	选中变化	(value)
change	穿梭后触发	(value, direction, movedKeys)

TransferItem

字段	说明	类型
key	唯一键	string | number
label	展示文案	string
disabled	禁用该项	boolean