数据穿梭框 Transfer

基本使用

数据穿梭框的基本用法。

自定义标题栏

通过 source-title ,target-title 插槽自定义标题栏的渲染内容

自定义选项渲染

通过 item 插槽自定义选项的渲染内容。

单向

通过设置 one-way ，使用单向模式的穿梭框。

分页

en-US

搜索

通过设置 show-search 来使用带搜索框的穿梭框，可以自定义搜索函数。

简单模式

通过设置 simple 来开启简单模式，点击选项即可移动。

树型穿梭框

通过穿梭框自定义接口可以实现树型穿梭框。

API

<transfer> Props

参数名	描述	类型	默认值	版本
data	穿梭框的数据	TransferItem[]	[]
model-value (v-model)	目标选择框中的值	string[]	-
default-value	目标选择框中默认的值（非受控状态）	string[]	[]
selected (v-model)	选中的选项值	string[]	-
default-selected	默认选中的选项值（非受控状态）	string[]	[]
disabled	是否禁用	boolean	false
simple	是否开启简单模式（点击选项即移动）	boolean	false
one-way	是否开启单向模式（仅可移动到目标选择框）	boolean	false
show-search	是否显示搜索框	boolean	false
show-select-all	是否展示全选勾选框	boolean	true	2.39.0
title	源选择框和目标选择框的标题	string[]	['Source', 'Target']
source-input-search-props	源选择框的搜索框配置	object	-	2.51.1
target-input-search-props	目标选择框的搜索框配置	object	-	2.51.1

<transfer> Events

事件名	描述	参数
change	目标选择框的值改变时触发	value: string[]
select	选中的值改变时触发	selected: string[]
search	用户搜索时触发	value: string type: 'target'|'source'

<transfer> Slots

插槽名	描述	参数	版本
source	源面板	data: TransferItem[] selectedKeys: string[] onSelect: (value: string[]) => void	2.39.0
source-title	源标题插槽	countTotal: number countSelected: number searchValue: string checked: boolean indeterminate: boolean onSelectAllChange: (checked:boolean) => void onClear: () => void	2.45.0
to-target-icon	移至目标图标插槽	-	2.52.0
to-source-icon	移至源图标插槽	-	2.52.0
target	目标面板	data: TransferItem[] selectedKeys: string[] onSelect: (value: string[]) => void	2.39.0
target-title	目标标题插槽	countTotal: number countSelected: number searchValue: string checked: boolean indeterminate: boolean onSelectAllChange: (checked:boolean) => void onClear: () => void	2.45.0
item	选项	value: string label: string

TransferItem

参数名	描述	类型	默认值
value	选项的值	string	-
label	选项的标签	string	-
disabled	是否禁用	boolean	false