Transfer

双栏穿梭选择框。

何时使用 #

  • 用直观的方式在两栏中移动元素,完成选择行为。
  • 需要在多个可选项中进行多选时。
  • 比起 Select 和 TreeSelect,穿梭框占据更大的空间,可以展示可选项的更多信息。

代码演示 #

基本用法 #

最简单的用法。

简单模式 #

通过设置 mode 为 'simple',可以开启简单模式,点击选项即移动。

带搜索框 #

带搜索框的穿梭框,可以自定义搜索函数。

拖拽排序 #

设置 sortable 属性为 true 后,可拖拽排序左右面板。

自定义穿梭按钮 #

展示自定义穿梭按钮的用法。

表格穿梭框 #

使用 Table 组件作为自定义渲染列表。

树穿梭框 #

自定义树形 transfer 面板。

虚拟滚动 #

通过设置 useVirtual 为 true,开启列表虚拟滚动

无障碍支持 #

通过设置locale去修改对无障碍支持,默认已经设置,请参考#无障碍键盘操作指南。 为保证可访问性,需要设置全局唯一的id

受控 #

展示受控的用法。

API #

Transfer #

参数 说明 类型 默认值
mode 移动选项模式

可选值:
'normal', 'simple'
Enum 'normal'
dataSource 数据源 Array<Object> []
value (用于受控)当前值 Array<String> -
defaultValue (用于非受控)初始值 Array<String> []
onChange 值发生改变的时候触发的回调函数

签名:
Function(value: Array, data: Array, extra: Object) => void
参数:
value: {Array} 右面板值
data: {Array} 右面板数据
extra: {Object} 额外参数
extra.leftValue: {Array} 左面板值
extra.leftData: {Array} 左面板数据
extra.movedValue: {Array} 发生移动的值
extra.movedData: {Object} 发生移动的数据
extra.direction: {String} 移动的方向,值为'left'或'right'
Function -
onSelect Item 被选中的时候触发的回调函数

签名:
Function(sourceSelectedValue: Array, targetSelectedValue: Array, trigger: String) => void
参数:
sourceSelectedValue: {Array} 源面板选中的 Item 列表
targetSelectedValue: {Array} 目标面板选中的 Item 列表
trigger: {String} 触发面板,值为'source'或'target'
Function -
disabled 是否禁用 Boolean false
leftDisabled 是否禁用左侧面板 Boolean false
rightDisabled 是否禁用右侧面板 Boolean false
itemRender 列表项渲染函数

签名:
Function(data: Object) => ReactNode
参数:
data: {Object} 数据
返回值:
{ReactNode} 列表项内容
Function data => data.label
showSearch 是否显示搜索框 Boolean false
filter 自定义搜索函数

签名:
Function(searchedValue: String, data: Object) => Boolean
参数:
searchedValue: {String} 搜索的内容
data: {Object} 数据
返回值:
{Boolean} 是否匹配到
Function 根据 label 属性匹配
onSearch 搜索框输入时触发的回调函数

签名:
Function(searchedValue: String, position: String) => void
参数:
searchedValue: {String} 搜索的内容
position: {String} 搜索面板的位置
Function () => {}
searchPlaceholder 搜索框占位符 String -
notFoundContent 列表为空显示内容 ReactNode 'Not Found'
titles 左右面板标题 Array<ReactNode> []
operations 向右向左移动按钮显示内容 Array<ReactNode> [<Icon type="arrow-right" />, <Icon type="arrow-left" />]
defaultLeftChecked 左面板默认选中值 Array<String> []
defaultRightChecked 右面板默认选中值 Array<String> []
listClassName 左右面板列表自定义样式类名 String -
listStyle 左右面板列表自定义样式对象 Object -
sortable 是否允许拖拽排序 Boolean false
onSort 拖拽排序时触发的回调函数

签名:
Function(value: Array, position: String) => void
参数:
value: {Array} 排序后的值
position: {String} 拖拽的面板位置,值为:left 或 right
Function () => {}
id 请设置 id 以保证transfer的可访问性 String -
children 接收 children 自定义渲染列表

签名:
Function() => void
Function -
useVirtual 是否开启虚拟滚动 Boolean -
showCheckAll 是否显示底部全选 checkbox Boolean true

无障碍键盘操作指南 #

按键 说明
Up Arrow 获取当前项的前一项焦点
Down Arrow 获取当前项的后一项焦点
Enter 当前列表选中的项移动到另一个列表
SPACE 选择/取消当前项或当前列表选中的项移动到另一个列表