# Transfer 穿梭框 UPDATE

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

国际化（多语言）

1、超出一行显示省略号 2、以字母省略 3、鼠标悬浮：考虑到性能问题，悬浮可以用原生 title 支持

Vue.use(WinDesign, { i18nOverflow: true })

# Pagination Attributes

参数	说明	类型	默认值
current	当前页	Number	1
defaultCurrent	当前页，非受控属性	Number	1
pageSize	每一页的数据量	Number	10

# 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
panel-height	自定义面板高度	{}	—	230px	V2.4.20

# 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	右侧列表底部的内容
target	右侧列表
source	左侧列表
—	自定义数据项的内容，参数为 { option }