穿梭框 transfer

双栏穿梭选择框

1. 何时使用

穿梭选择框用直观的方式在两栏中移动元素，完成选择行为。
选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。其中，左边一栏为 source，右边一栏为 target。

该组件分两种类型：列表型穿梭框和树型穿梭框，通过 treeType 来切换在树形穿梭框时，根据业务需求，又分两种情形：可以穿梭父节点和只穿梭最底层的叶子节点，根据参数 checkable 来切换

import { high } from 'nc-lightapp-front'
const { Transfer } = high

参数	说明	类型	默认值
dataSource	设置数据源	Array	[]
targetKeys	展示在右边列表的数据的 key 集合	Array	[]
treeType	指定穿梭框渲染的类型，如果treeType为 true,左边渲染的是树型穿梭框，否则为列表穿梭	boolean	false
onTargetKeysChange	当右边列表的数据发生变化时执行的回调	func	-
showSearch	是否显示搜索框	boolean	false
searchPlaceholder	搜索框的提示文字	string	‘请输入内容’
checkable	只在 treeType 为true时生效，checkable 为 true时，只穿梭叶子节点	boolean	true
className	自定义穿梭框的类名，用于写自己的样式	string	-
showMoveBtn	是否显示排序按钮	boolean	false
titles	自定义左右两边顶部的title	array	[ ‘来源’, ‘目标’ ]
operations	自定义穿梭按钮的内容	array	[ ‘’, ‘’ ]
notFoundContent	列表为空时显示的内容	string	‘暂无数据’
listRender	列表渲染的字段内容, 返回一个普通对象，其中 label 字段为 ReactElement，value 字段为 title	func\|\|string	(item, title) => item[title] or (item, title) => { value: title, label: {title} }item[title]
lazy	dom懒加载, 使用listolist transfer放在模态框时必须添加这个属性	obj	当tranfer放在bee-modal里添加参数 lazy={container:”modal”}

暂无

暂无