Transfer 穿梭框

TxTransfer 用于在源列表和目标列表之间移动条目，适合权限分配、渠道选择、成员分组等场景。组件保持受控模型，业务侧通过 v-model 持有已选 key。

基础用法

可筛选穿梭

开启 filterable 后，左右列表都会显示筛选输入框。emptyText 可用于本地化空态文案。

示例即将加载...

<script setup lang="ts">
import { ref } from 'vue'

const selected = ref<Array<string | number>>(['release'])
const data = [
  { key: 'release', label: '正式通道' },
  { key: 'beta', label: 'Beta 通道' },
  { key: 'snapshot', label: '快照通道' },
  { key: 'internal', label: '内部灰度', disabled: true },
]
</script>

<template>
  <TxTransfer
    v-model="selected"
    :data="data"
    :titles="['可选渠道', '已选择']"
    filterable
    filter-placeholder="筛选渠道"
    empty-text="暂无数据"
    add-aria-label="添加选中渠道"
    remove-aria-label="移除选中渠道"
  />
</template>

API（Lite）

属性名	类型	说明
modelValue		目标列表中的条目 key
data		全量条目列表，包含 key、label 和可选 disabled
titles		左右面板标题
filterable		是否显示筛选输入
filterPlaceholder		筛选输入占位文案
emptyText		列表为空时的展示文案
addAriaLabel		添加按钮的无障碍标签
removeAriaLabel		移除按钮的无障碍标签
targetOrder	originalpush	目标列表按原始 data 顺序或追加顺序排序

Events

事件	参数	说明
`update:modelValue`	`Array<string \| number>`	已选 key 更新
`change`	`Array<string \| number>`	已选 key 变化

Source

查看源码

packages/tuffex/packages/components/src/transfer/index.ts