Skip to content

Transfer 穿梭框

左右双面板 + 中间穿梭按钮,支持搜索过滤与键盘操作。

基础用法

基础

预置选中值与标题

预置 value + titles

可搜索

searchable

区分大小写搜索

searchable + case-sensitive

单向模式

只能从左向右穿梭,右侧只读;左侧展示全部数据,已穿梭项禁用并显示为已选。

one-way

虚拟滚动

万级数据窗口化渲染,滚动流畅,选中态 / 全选 / 键盘导航保持。

virtual(10000 项,item-height 32)

事件

变化事件

API

属性

属性说明类型默认值
case-sensitive搜索区分大小写(默认大小写不敏感)boolean
data数据(JSON attribute 声明式通道,property 赋值单向反射,[{ key, label, disabled }])TransferItem[] | string[]
item-height虚拟滚动每行固定高度(px),默认 36string36
one-way单向模式:只能左→右移动,右侧只读;左侧展示全部数据,已穿梭项禁用并显示为已选boolean
searchable面板内搜索过滤(左右各自过滤)boolean
source-title
target-title
titles双面板标题(JSON 数组)或 source-title/target-titlestring
value已选 key 数组(JSON 属性)string[]
virtual大数据量窗口化渲染(虚拟滚动,行高默认 36px)boolean

事件

事件说明
oas-change穿梭后值变化,detail: { value }

键盘:聚焦面板列表后 / 移动选中,Enter 穿梭。

基于 MIT OR Apache-2.0 双许可发布