# Transfer 穿梭框 UPDATE

一种数据输入类的组件,两栏布局的组件,用直观的方式在两栏中移动元素,让用户感知到对数据的选择与处理,完成选择行为。

# API

# Attributes

参数 说明 类型 可选值 默认值 Version
target-clearable 目标列表配置是否可删除按钮 Boolean V2.2.8
one-way 单向 Boolean V2.2.8
simple 简单模式 Boolean V2.2.8
pagination 传入 Pagination 的配置,通过数组为左右列表传入不同属性 Object / Array V2.2.8
button-texts 自定义按钮文案 Array [ ]
data Transfer 的数据源 Array[{ key, label, disabled }] [ ]
filterable 是否可搜索 Boolean false
filter-placeholder 搜索框占位符 String 请输入搜索内容
filter-method 自定义搜索方法 Function
format 列表顶部勾选状态文案 Object{noChecked, hasChecked} { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }
left-default-checked 初始状态下左侧列表的已勾选项的 key 数组 Array [ ]
props 数据源的字段别名 Object{key, label, disabled}
render-content 自定义数据项渲染函数 Function(h, option)
right-default-checked 初始状态下右侧列表的已勾选项的 key 数组 Array [ ]
titles 自定义列表标题 Array ['源列表', '目标列表']
target-order 右侧列表元素的排序策略:若为 original,则保持与数据源相同的顺序;若为 push,则新加入的元素排在最后;若为 unshift,则新加入的元素排在最前 String 'original' | 'push' | 'unshift' 'original'
value / v-model 绑定值 Array
panel-width 自定义面板宽度 Array [ ] V2.2.15
selectable 是否开启选择器 Boolean false V2.3.2
show-table 是否显示表格 Boolean false V2.3.2

# Events

事件名称 说明 回调参数 Version
change 右侧列表元素变化时触发 当前值、数据移动的方向('left' | 'right')、发生移动的数据 key 数组
page-change 分页发生变化时触发 当前页、列表类型
left-check-change 左侧列表元素被用户选中 / 取消选中时触发 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组
right-check-change 右侧列表元素被用户选中 / 取消选中时触发 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组
left-search 左侧列表顶部搜索事件 当前输入框的值 V2.3.2
right-search 右侧列表顶部搜索事件 当前输入框的值 V2.3.2

# Methods

方法名 说明 参数
clearQuery 清空某个面板的搜索关键词 'left' | 'right',指定需要清空的面板

# Slots

name 说明
left-footer 左侧列表底部的内容
right-footer 右侧列表底部的内容
自定义数据项的内容,参数为 { option }
上次更新: 4/17/2024, 5:12:42 PM