Transfer 穿梭框

基础用法

Transfer 穿梭框 - 图1

可搜索

在数据很多的情况下，可以对数据进行搜索和过滤。

Transfer 穿梭框 - 图2

可自定义

可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。

Transfer 穿梭框 - 图3

数据项属性别名

默认情况下，Transfer 仅能识别数据项中的 key、label 和 disabled 字段。如果你的数据的字段名不同，可以使用 propsAlias 属性为它们设置别名。

Transfer 穿梭框 - 图4

Attributes

参数说明类型可选值默认值
dataTransfer 的数据源array[{ key, label, disabled }]—[ ]
filterable是否可搜索boolean—false
filterPlaceholder搜索框占位符string—请输入搜索内容
filterMethod自定义搜索方法function——
titles自定义列表标题array—['列表 1', '列表 2']
buttonTexts自定义按钮文案array—[ ]
renderContent自定义数据项渲染函数function(h, option)——
footerFormat列表底部勾选状态文案object{noChecked, hasChecked}—{ noChecked: '共 ${total} 项', hasChecked: '已选 ${checked}/${total} 项' }
propsAlias数据源的字段别名object{key, label, disabled}——
leftDefaultChecked初始状态下左侧列表的已勾选项的 key 数组array—[ ]
rightDefaultChecked初始状态下右侧列表的已勾选项的 key 数组array—[ ]
leftFooter左侧列表底部的内容ReactElement—-
rightFooter右侧列表底部的内容ReactElement—-

Events

事件名称说明回调参数
onChange右侧列表元素变化时触发当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组