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),默认 36 | string | 36 |
one-way | 单向模式:只能左→右移动,右侧只读;左侧展示全部数据,已穿梭项禁用并显示为已选 | boolean | — |
searchable | 面板内搜索过滤(左右各自过滤) | boolean | — |
source-title | — | — | — |
target-title | — | — | — |
titles | 双面板标题(JSON 数组)或 source-title/target-title | string | — |
value | 已选 key 数组(JSON 属性) | string | [] |
virtual | 大数据量窗口化渲染(虚拟滚动,行高默认 36px) | boolean | — |
事件
| 事件 | 说明 |
|---|---|
oas-change | 穿梭后值变化,detail: { value } |
键盘:聚焦面板列表后 ↑/↓ 移动选中,Enter 穿梭。