默认主题
穿梭框

示例

0 / 3
0 / 2

You selected: [{"label":"主机名0","key":0},{"label":"主机名1","key":1,"disabled":true}]

基础用法

穿梭框基本用法,支持Shift进行多选。可以使用v-model来进行选择的值的双向绑定。

你需要给每一行数据指定key,默认会取数据项中的key值,没有则会取label值。你也可以通过keyName属性来指定取哪个值当做key

value选中的值为原始数据data数组中的同一引用。@since v1.0.0 value中的数据不一定是data中的同一引用,而是通过key去判断是否是同一数据。

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
0 / 5
0 / 0
自定义渲染列表

通过label属性,可以自定义列表渲染逻辑。此时如果你需要启动列表过滤功能filterable,需要通过filter属性,指定自定义过滤函数。

全选和filterable一起作用时,交互逻辑如下:

  1. 左侧未过滤,全选则选中所有非disabled的选项
  2. 左侧已过滤,全选则选中当前过滤出的非disabled的选项
  3. 左侧先全选,再过滤,过滤掉的选项保持选中状态
index.vdt
index.js
index.vue (Vue)
index.jsx (React)
0 / 0
全部策略
0 / 0

You selected:

自定义搜索

我们可以通过filter扩展点自定义搜索内容,而且通过该扩展点的参数type,可以给左侧/右侧/两侧定义不同的内容

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
2 / 5
0 / 0

You checked left side: [{"label":"主机名0","key":0},{"label":"主机名2","key":2}]

控制选择项

通过leftChecked属性,我们可以控制左侧已选项,rightChecked同理

leftChecked数组为data中每一项的同一引用

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
未分配
标准双人间
完全自定义

本例展示如何利用Transfer自定义更复杂的应用场景,本例中我们通过list扩展点定义整个列表,并且根据扩展点参数区别左右列表,定义不同的内容;然后通过enableAddenableRemove定义箭头按钮的可用状态;最后通过addremove事件定义左右穿梭的逻辑

index.vdt
index.js
index.vue (Vue)
index.jsx (React)

属性

属性 说明 类型 默认值
data 需要展示的列表数据, 其中label会默认当做列表文案展示,disabled用于指定是否禁用该行选择 Array []
value 已选择的数据项,可用v-model进行双向绑定 Array []
leftChecked 左边已勾选的数据项 Array []
rightChecked 右边已勾选的数据项 Array []
filterable 是否需要过滤列表功能,默认根据data中定义的label进行过滤 Boolean false
filter 指定自定义的过滤函数,组件会将每行数据data以及关键词keywords传给它 Function (data, keywords) => data.label.includes(keywords)
label 指定自定义的渲染函数,用于渲染每行数据,组件会将每行数据data以及当前数据的索引index传给它 Function (data, index) => data.label
placeholder 当开启过滤功能时,用于输入框展示的占位文案 String "请输入"
leftTitle 左边顶部展示的标题 String "请选择"
rightTitle 右边顶部展示的标题 String "已选择"
keyName 指定每一行数据的哪个属性当做列表的key属性,默认会取key或者label当做key String "key"
enableAdd 指定右箭头按钮的可用状态 Function () => this.get('leftChecked').length
enableRemove 指定左箭头按钮的可用状态 Function () => this.get('rightChecked').length

扩展点

名称 说明 参数
label 自定义每一项的渲染函数,类似于label属性 data, index, type
filter 自定义检索内容 type
header 自定义整个头部内容 type
list 自定义整个列表内容 type

事件

事件名 说明 参数
add 右箭头按钮点击事件 -
remove 左箭头按钮点击事件 -