穿梭框 Transfer
issue

v2.0.13
v2.0.13

v2.0.12

v2.0.11

v2.0.10

v2.0.9

v2.0.8

v2.0.7

v2.0.6

v2.0.5

v2.0.4

v2.0.3

v2.0.2

v2.0.1

v2.0.0

v1.0.8

v1.0.7

v1.0.6

v1.0.3

两框之间的元素迁移，非常直观且有效。一个或多个元素选择后点击方向按钮转到另一列框中。左栏是“源”，右边是“目标”

何时使用

需要两框之间的元素迁移时

如何使用

import { Transfer } from 'tinper-bee';

or

import Transfer from 'bee-transfer';
import 'bee-transfer/build/Transfer.css';

能力特性

API

参数	说明	类型	默认值
dataSource	设置数据源。当有targetKey props存在时，dataSource的数据刨去targetKey数据,剩下的都放在左边列表	[]	[]
render	每行数据渲染函数，该函数的入参为 dataSource 中的项，返回值为 ReactElement。或者返回一个普通对象，其中 label 字段为 ReactElement，value 字段为 title	Function(record)	-
targetKeys	展示在右边列表的数据集	[]	[]
selectedKeys	所有选中的item的keys	[]	[]
onChange	当item在穿梭成功后的回调参数(targetKeys, direction, moveKeys)	func	-
onSelectChange	当选中的item发生改变时的回调参数(sourceSelectedKeys, targetSelectedKeys)	fun	-
onScroll	当滑动可选的item列表的回调参数(direction, event)	func	-
listStyle	自定义的columns的样式表	object	-
className	class	string	''
titles	两columns的title	[]	-
operations	自定义按钮操作	[]	'>', '<'
showSearch	是否显示搜索框	boolean	false
filterOption	搜索过滤方法参数(inputValue, option)	func或者boolean	-
searchPlaceholder	搜索框的默认显示文字	string	'Search'
notFoundContent	当没有相关内容的显示内容	string或ReactNode	'Not Found'
footer	渲染底部的dom	ReactNode	-
lazy	懒加载dom	object	当tranfer放在bee-modal里添加参数 lazy={container:"modal"}
onSearchChange	当搜索域变化的回调函数参数(direction: 'left'	'right', event: Event)	func
showCheckbox	是否显示Checkbox复选框	bool	true
draggable	是否可以通过拖拽进行穿梭和排序	bool	false
appendToBottom	是否将已选项追加到右侧列表末尾	bool	false
renderOperation	自定义扩展操作栏	() => React.Node	`()=>''`

注意事项

按照 React 的规范，所有的组件数组必须绑定 key。在 Transfer 中，dataSource里的数据值需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。

如果你的数据没有这个属性，务必使用 rowKey 来指定数据列的主键。

// 比如你的数据主键是 uid
return <Transfer rowKey={record => record.uid} />;

更新日志

v2.0.12 2019-05-08 ( release地址 )


bee-transfer @2.0.12
[Fixbug]解决dataSource为空时报错的问题

v2.0.11 2019-05-08 ( release地址 )


bee-transfer @2.0.11
[Feature]支持自定义右侧已选列表的排列顺序
[Feature]增加appendToBottom参数，支持将已选项添加到右侧列表末尾

v2.0.10 2019-04-28 ( release地址 )


bee-transfer @2.0.10
[Fixbug]解决复选框和节点间的间距过宽的问题
[Fixbug]解决动态改变targetKeys时，列表数据未更新的问题
[Fixbug]解决控制台警告问题

v2.0.9 2019-04-24 ( release地址 )


bee-transfer @2.0.9
[Feature]增加draggable参数，设置是否可以通过拖拽进行穿梭和排序
[Feature]增加showCheckbox参数，设置是否显示复选框Checkbox

v2.0.8 2019-04-09 ( release地址 )


[Feature]bee-transfer @2.0.8，升级依赖

v2.0.3 2019-03-04 ( release地址 )


解决穿梭框影响了bee-button样式的问题，主要是按钮disable状态的样式

何时使用

如何使用

能力特性

常用可选transfer
带搜索框的tranfer
底部自定义的transfer
隐藏复选框
拖拽穿梭
自定义渲染行数据
自定义右侧已选列表的排列顺序
树穿梭

注意事项

更新日志