搜索组件...⌘K

Transfer 穿梭框

用于在两栏之间移动元素，支持搜索过滤、自定义渲染、虚拟滚动分页、尺寸、禁用、高亮动画等功能。

基础用法
通过 v-model 绑定目标侧已选值数组，options 提供全部可选数据：
源列表0/8
目标列表0/2

目标：bj, sh

带搜索
设置 showSearch 后，两栏顶部展示搜索输入框，可快速过滤条目：
源列表0/10
目标列表0/0
暂无数据

目标：空

自定义过滤
通过 filter 属性自定义搜索逻辑，此处同时匹配 label 和 value：
源列表0/10
目标列表0/0
暂无数据

目标：空

自定义标题
通过 titles 属性设置左右两栏标题，是一个二元数组：
候选城市0/10
已选城市0/0
暂无数据

目标：空

自定义渲染
使用 #item 插槽自定义每个选项的渲染，参数 { option, direction }：
源列表0/6
目标列表0/0
暂无数据

目标：空

禁用选项与全局禁用
单个选项设置 disabled:true 禁用特定条目，全局 disabled 禁用整个穿梭框：
源列表0/6
目标列表0/0
暂无数据

目标：空

不同尺寸
设置 size 属性使用三种预设尺寸：

小尺寸

源列表0/10
目标列表0/0
暂无数据

中等尺寸（默认）

源列表0/9
目标列表0/1

大尺寸

源列表0/10
目标列表0/0
暂无数据
清空目标侧
设置 showClearRight 后，右侧面板底部出现清空按钮：
源列表0/7
目标列表0/3
清空

目标：bj, sh, gz

大数据量分页滚动
通过 pageSize 控制每次渲染数量，列表滚动到底自动加载更多：
源列表0/200
滚动加载更多...
目标列表0/0
暂无数据

目标列表共 0 项

表单联动
结合 Card 组件重构完整场景，展示 change 事件处理：
权限分配
可用权限0/6
已授权0/2

API

Props

参数类型默认值说明
modelValueany[][]目标侧已选值数组（v-model）
optionsTransferOption[][]全部可选数据
disabledbooleanfalse是否全局禁用
showSearchbooleanfalse是否显示搜索框
filterablebooleantrue是否启用默认过滤（配合搜索框）
filter(query: string, option: TransferOption) => boolean—自定义过滤函数
titles[string, string]['源列表', '目标列表']左右两栏标题
filterPlaceholderstring'搜索...'搜索框占位文本
pageSizenumber50分页滚动每页条数
size'sm' | 'md' | 'lg''md'穿梭框尺寸
showClearRightbooleanfalse是否显示右侧清空按钮
emptyTextstring'暂无数据'无数据时的提示文本

Events

事件名类型说明
update:modelValue(value: any[]) => void值变化时触发
change(targetValues: any[], direction: "left" | "right", movedValues: any[]) => void元素移动后触发，direction 表示移动方向，movedValues 为移动的值
search(direction: "left" | "right", query: string) => void搜索时触发
scroll(direction: "left" | "right", event: Event) => void列表滚动时触发

Slots

插槽名说明
item自定义选项渲染，参数 { option, direction }

Methods

方法名类型说明
clearRight() => void清空右侧目标列表

TransferOption

属性类型默认值说明
labelstring—选项显示文本
valueany—选项唯一标识值
disabledbooleanfalse是否禁用该选项