Transfer 穿梭框

基础用法

可搜索过滤

在数据很多的情况下,可以对数据进行搜索和过滤。

自定义

可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。

数据项属性别名

默认情况下,Transfer 仅能识别数据项中的 keylabeldisabled 字段。 如果你的数据的字段名不同,可以使用 props 属性为它们设置别名。

属性

属性说明类型可选值默认值
model-value / v-model选中项绑定值array
dataTransfer 的数据源array[{ key, label, disabled }][ ]
filterable是否可搜索booleanfalse
filter-placeholder搜索框占位符stringEnter keyword
filter-method自定义搜索方法function
target-order右侧列表元素的排序策略: 若为 original,则保持与数据源相同的顺序; 若为 push,则新加入的元素排在最后; 若为 unshift,则新加入的元素排在最前stringoriginal / push / unshiftoriginal
titles自定义列表标题array['List 1', 'List 2']
button-texts自定义按钮文案array[ ]
render-content自定义数据项渲染函数function(h, option)
format列表顶部勾选状态文案object{noChecked, hasChecked}{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }
props数据源的字段别名object{key, label, disabled}
left-default-checked初始状态下左侧列表的已勾选项的 key 数组array[ ]
right-default-checked初始状态下右侧列表的已勾选项的 key 数组array[ ]
validate-event是否触发表单验证boolean-true

插槽

插槽名说明
自定义数据项的内容, 参数为 { option }
left-footer左侧列表底部的内容
right-footer右侧列表底部的内容

方法

方法名说明参数
clearQuery清空某个面板的搜索关键词'left' / 'right'

事件

事件名说明回调参数
change右侧列表元素变化时触发当前值、数据移动的方向('left' / 'right')、发生移动的数据 key 数组
left-check-change左侧列表元素被用户选中 / 取消选中时触发当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组
right-check-change右侧列表元素被用户选中 / 取消选中时触发当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组

源代码

组件文档

贡献者