@hi-ui/transfer

Transfer 穿梭框

在一定展示空间里对选项进行单个或批量移动从而完成挑选的数据容器

何时使用

一组数据进行两种状态的分类时

有更多的空间进行选择时

需快速批量的完成选项归类且可调整顺序时

使用示例

Props

参数	说明	类型	可选值	默认值
type	穿梭框类型	string	'default' | 'multiple'	'default'
showCheckAll	是否展示全选按钮	boolean	true | false	false
title	标题(数组长度为 1 或 2 位，1 位时左右标题将相同，2 位时将使用对应索引标题)	ReactNode[]	-	-
searchable	是否可筛选	boolean	true | false	false
emptyContent	数据为空时的显示内容(数组长度为 1 或 2 位，1 位时左右内容将相同，2 位时将使用对应索引内容)	ReactNode[]	-	-
disabled	是否禁用	boolean	true | false	false
data	穿梭框数据源	DataItem[]	-	—
onDragStart	拖拽开始时的回调函数	(dragItem: DataItem) => boolean	-	-
onDragEnd	拖拽结束时的回调函数(完成拖拽)	(newData: DataItem[]) => void	-	-
onDrop	放开拖拽元素时的回调函数，可用于条件判断，阻止拖拽到对应位置	(targetItem: DataItem, sourceItem: DataItem) => boolean	-	-
targetLimit	最大可穿梭上限	number	-	-
targetIds	目标框内的元素 id 集合	number[] | string[]	-	-
targetSortType	目标框内的排序方式	string	'default' | 'queue'	'default'
placeholder	搜索输入框占位(数组长度为 1 或 2 位，1 位时左右内容将相同，2 位时将使用对应索引内容)	string[]	-	-

Events

名称	说明	类型	参数	返回值
onChange	选中元素被移动到目标框内后的回调	(targetKeys: number[] | string[], direction: 'left' | 'right', moveItems: DataItem[]) => void	targetKeys: 目标框内的元素 ID 集合 direction: 移动方向 moveItems: 移动的数据项集合	-
render	自定义菜单渲染函数	(item: DataItem) => ReactNode	-	无内容

Type

DataItem

参数	说明	类型	可选值	默认值
id	唯一 id	ReactText	-
title	显示内容	string	-	-
disabled	是否禁用	boolean	true | false	false

CHANGELOG

参数	变更类型	变更内容	解决的问题
propName	feature | deprecated | update	变更了什么	之前是什么样子，解决什么问题
----	----	----	----
placeholder	feature	占位	增强搜索输入框
DataItem.title	update	字段：DataItem.content -> DataItem.title；类型：string -> ReactNode	统一数据源类型
defaultTargetIds	feature	-	表单控件统一添加非受控模式支持
type	update	字段值：'default' -> 'single'	命名统一，移除含义不明的 default
pagination	feature	-	功能强化，大数据分页支持
targetSortType	update	字段值：'default' -> 'head'	命名统一，移除含义不明的 default
onDrop	feature	(targetItem: DataItem, sourceItem: DataItem) => boolean -> (targetItem: DataItem, sourceItem: DataItem, info: { before: ReactText[], after: ReactText[] }) => boolean	新增第三个参数，之前和之后的 id 顺序列表