穿梭框

示例

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数组中的同一引用

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.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)

属性

属性 说明 类型 默认值
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"

扩展点

名称 说明
label 自定义每一项的渲染函数,类似于label属性