Transfer 穿梭框
在两个列表间移动条目的穿梭框
用法
可筛选穿梭
filterable 在两侧显示筛选输入；emptyText 本地化空态文案。
示例加载中...
优先级排序
orderable 让目标面板按 modelValue 顺序显示名次与上移 / 下移；maxHeight 让长列表在面板内滚动。
示例加载中...
权限资源授权
TxTransfer 只负责资源的受控移动；权限域、归属团队与审计分别交给 TxTree、TxTreeSelect 与 TxTimeline。
示例加载中...
最佳实践
modelValue由业务侧受控，只保存条目 key；每个data[].key保持唯一且稳定。- 禁用项保留在
data中展示，不在外层过滤掉，以免用户误以为资源不存在。 - 选择顺序有意义时用
targetOrder="push"；需要用户手动排序（优先级、回退链）时开orderable。 - 放进弹窗或抽屉时用
maxHeight贴合容器（如min(56dvh, 520px)）；紧凑位置调低minHeight。 - 本地化界面覆盖
titles、emptyText与全部*AriaLabel属性。
API 参考
属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue | 目标列表中的条目 key。 | ||
| data | 全量条目，含 key、label 与可选的 disabled。 | ||
| titles | 左右面板标题。 | ||
| filterable | 两侧显示筛选输入。 | ||
| filterPlaceholder | 筛选输入的占位文案。 | ||
| emptyText | 面板为空时的文案；传元组则左右各用一条。 | ||
| maxHeight | 面板高度上限，数字按 px；写入 --tx-transfer-max-height。 | ||
| minHeight | 面板高度下限，数字按 px；写入 --tx-transfer-min-height。 | ||
| addAriaLabel | 添加按钮的可访问名称。 | ||
| removeAriaLabel | 移除按钮的可访问名称。 | ||
| selectAllAriaLabel | 全选框的可访问名称，后接面板标题。 | ||
| moveUpAriaLabel | 上移按钮的可访问名称，后接条目文本。 | ||
| moveDownAriaLabel | 下移按钮的可访问名称，后接条目文本。 | ||
| targetOrder | 目标列表按原始 data 顺序或追加顺序排列；`orderable` 时不生效。 | ||
| orderable | 目标面板显示名次与上移/下移，顺序即 modelValue 顺序。 |
事件
| 事件 | 参数 | 说明 |
|---|---|---|
update:modelValue | Array<string | number> | 已选 key 更新。 |
change | Array<string | number> | 与 update:modelValue 同时触发。 |
概述
- 面板头部的全选框只作用于当前可见且未禁用的行；部分选中时报告
aria-checked="mixed"。 - 勾选后按中间按钮移动，或直接双击一行；双击禁用行无效。
- 中间按钮有勾选时变为主色并显示待移动数量，无勾选时禁用。
orderable时名次与首末判定取自未过滤的modelValue，筛选不影响名次。
技术实现
- 面板读取
--tx-transfer-max-height（默认320px）与--tx-transfer-min-height（默认240px），两个 prop 只写这两个变量；上限保证滚动发生在列表内部。 - 源码：
packages/tuffex/packages/components/src/transfer/。
查看源码
packages/tuffex/packages/components/src/transfer/index.ts