Skip to content

Transfer 穿梭框

xy-transfer 适合成员分配、权限绑定和资源配置这类双栏迁移场景。当前 v1 只做基础双栏穿梭,不提供树穿梭和表格穿梭。

基础用法

默认通过 v-model 绑定右侧目标列表的 key 数组。

基础用法双向选择

穿梭框用于在两个列表之间移动数据,适合权限分配等场景。

源列表2
目标列表1

搜索与禁用项

开启 filterable 后可以分别在左右两栏做本地过滤,禁用项不会参与迁移。

源列表2
目标列表1

Transfer Attributes

属性说明类型默认值
modelValue已选中项的 key 集合TransferKey[][]
data可迁移的数据源TransferItem[][]
titles左右两栏的标题[string, string]['列表 1', '列表 2']
disabled是否整体禁用booleanfalse
filterable是否显示本地搜索框booleanfalse
filterPlaceholder搜索框占位文案string'请输入'
size尺寸'xs' / 'sm' / 'md' / 'lg' / 'xl''md'

Transfer Events

事件名说明参数
update:modelValue选中集合变化(value: TransferKey[])
change数据迁移后触发(value: TransferKey[])

Transfer Slots

插槽说明接收参数
default自定义数据项渲染内容{ item, checked, side }(item 为 TransferItem