TreeTransfer 树形穿梭框

使用

基础用法

TreeTransfer 的数据通过 data 属性传入。 数据需要是一个对象数组，每个对象有以下属性：key(默认为id) 为数据的唯一性标识，label 为显示文本，disabled 表示该项数据是否禁止被操作。

自定义Icon

TreeTransfer组件可以通过以下属性进行自定义设置：expand-icon（展开图标）、expand-icon-color（展开图标颜色）、collapse-icon（收起图标）、collapse-icon-color（收起图标颜色）和 icon（图标样式）。为了提高代码的可读性和维护性，建议将这些属性整合到一个名为 TreeTransferOptions 的对象中。在使用时，您可以根据需要设置这些属性，以实现自定义展示效果。

自定义

可以对列表标题文案、默认选中值、按钮文案等进行自定义。

可以使用 titles、default-data、rightHeader插槽、empty插槽分别对列表标题文案、默认选中值、按钮文案、空数据文案进行自定义。此外，如果希望某些数据项在初始化时就被勾选，可以使用 default-data 属性。 最后，本例还展示了 change 事件的用法。

拖拽

设置showDrag属性为true可以开启右侧列表的拖拽功能。

多搜索框

设置showSearchInput属性为true可以开启多搜索框功能, left可以指定开启左侧搜索框。 searchConfig属性可以指定左侧搜索框的配置，rightSearchConfig属性可以指定右侧搜索框的配置。

多列表格

配置columns属性可以开启多列表格功能, 使用rowKey属性可以指定数据的唯一标识。

指定高度

设置tableHeight属性可以指定内容区的高度。

自适应高度

设置adaptive属性令指定内容区高度自适应。

分页模式

设置showPage为true可以开启分页模式, 并且还可以设置成left或right指定分页单独显示在左侧或右侧。 leftPaginationConfig属性可以指定左侧分页的配置，rightPaginationConfig属性可以指定右侧分页的配置(不存在时与左侧配置相同)。

动态数据

v-model可以绑定数据，可以实现动态数据加载。

提示

使用v-model后,default-data属性将失效。

API

TreeTransfer Props

参数名	描述	类型	默认值
v-model / modelValue	选中数据	TreeTransferData[]	-
row-key	指定用来作为唯一标识的键名	string	id
data	绑定的数据	TreeTransferData[]	-
default-data	默认选中数据	string[]	-
titles	视图标题	array	-
use-tree	是否使用树形结构	boolean	false
expand-icon	展开图标	string | Component	-
expand-icon-color	展开icon颜色	string	-
collapse-icon	收起图标	string | Component	-
collapse-icon-color	收起icon颜色	string | Component	-
icon	叶子节点图标	string | component	false
icon-color	叶子节点icon颜色	string	-
tree-config	树形结构配置	object	-
label	显示字段	string	-
scroll-y	滚动条配置	object	-
show-drag	是否启用拖拽排序	boolean	false
show-search-input	显示对应位置搜索框(true时左右都显示)	boolean | 'left'	left
search-config	左侧搜索框配置	object	-
right-search-config	右侧搜索配置	object	-
show-page	是否显示分页	enum	false
left-pagination-config	左侧分页配置	object	-
right-pagination-config	右侧分页配置，不存在时默认使用左侧分页配置	object	-
columns	进行表格列配置	Column[]	-
table-height	表格内容高度	number	-
check-method	自定义选中方法	Function	-
checkbox-all	是否全部选中	boolean	-

TreeTransfer Events

事件名	描述	类型
change	选中数据变化时触发	Function
drag	拖拽排序时触发	Function
remote-query	远程搜索时触发	Function
server-paging	服务端分页时触发	Function
page-current-change	分页当前页变化时触发	Function
page-size-change	分页每页条数变化时触发	Function
page-change	分页每页条数变化时触发	Function
page-prev-click	分页每页条数变化时触发	Function
page-next-click	分页每页条数变化时触发	Function

Column

参数名	描述	类型	默认值
title	列头显示文字	string	-
field	列字段名	string	-
width	列宽度	number | string	-
minWidth	最小列宽度	number | string	-
treeNode	useTree=true时有效，指定树节点列	boolean	-
sortable	是否可排序	boolean	false
showIcon	是否显示图标	boolean	false
visible	是否显示该列	boolean	true
showColumnMenu	是否显示列头菜单	boolean	false
group	用于多级表头分组，参数配置与列配置一致	Column[]	-
render	自定义渲染函数	Function	-
renderEdit	自定义渲染编辑单元格函数	Function	-
dataType	数据类型	enum	-

SearchConfig

参数名	描述	类型	默认值
strict	是否精确搜索	boolean	false
searchMethod	自定义搜索方法	Function	-
isRemoteQuery	是否远程搜索	boolean	false
ignoreCase	是否忽略大小写	boolean	false
searchColumns	允许指定搜索列,输入值为表格列配置的field,只有指定列才会进行搜索	string[]	-
supportPinYin	允许指定拼音搜索列,输入值为表格列配置的field,只有指定列才会进行搜索，为true时，会搜索所有数据	boolean | string[]	false

TablePaginationConfig

参数名	描述	类型	默认值
total	总条数	number	-
pageSize	每页条数	number	-
pageSizes	每页条数选项	number[]	-
currentPage	当前页数	number	-
pageCount	总页数	number	-
layout	分页布局	enum	-
isRemotePaging	是否服务端分页	boolean	false

TreeTransfer Methods

方法名	描述	类型
clearData	清空选择的数据	Function
setCheckboxRow	设置某一行的选中状态	Function
isCheckedRow	获取某一行的选中状态	Function
clearQuery	清空搜索框内容	Function
getQuery	获取搜索框内容	Function
setAllCheckboxRow	设置所有行的选中状态	Function
clearCheckboxRow	设置所有行的清除复选框选中行选中状态	Function
clearCheckboxReserve	清除复选框缓存状态	Function
getCheckboxRecords	获取选中的数据	Function

TreeTransfer Slots

插槽名	描述	参数
left-cell	自定义左侧单元格内容	-
right-cell	自定义右侧单元格内容	-
right-header	自定义右侧头部内容	-
right-label	自定义右侧文本内容	-
empty	自定义空数据内容	object