react-field-mapping

关系映射组件

View the Demo and its source for more.

使用中需要注意的一点是relation，是由组件内部控制的，所以是不受控的，连线后组件内部relation改变，连线也是组件内部控制。但是外部传入的relation是可以改变内部的relation，在组件内会监听传入的relation，可以在onChange的时候改变传入的relation，来达到受控的效果，如果onChange的时候不改变传入的relation，那么relation就是defaultRelation的效果。

API

FieldMapping

参数		说明	类型	默认值
className		自定义class	string	""
style		自定义style	object	{}
source	data	源表数据（受控）	array	[]
	columns	表格列的配置描述，具体项见下表	ColumnProps[]	[]
	onChange	表数据change监听，目前只有sort会触发，且开启sort时必须同步源表数据后，sort才会生效	function	(sourceData) => {}
	mutiple	是否允许一个source连接多个target	boolean	false
target	data	目标表数据（受控）	array	[]
	columns	表格列的配置描述，具体项见下表	ColumnProps[]	[]
	onChange	表数据change监听，目前只有sort会触发，且开启sort时必须同步目标表数据后，sort才会生效	function	(sourceData) => {}
	mutiple	是否允许多个source连接一个target	boolean	false
isSort		是否开启字段排序	boolean	false
edit		线条是否可以拖动/删除（如果需要预览态，isSort不能为true）	boolean	true
relation		映射数据（不受控，但是不等同default，可以update）	array[{source:{name,type}, target:{name,type}}]	[]
onChange		关联变化监听	function(relation)	-
onDrawStart		开始关联监听	function(source, relation)	-
onDrawing		关联进行中监听	object	-
onDrawEnd		关联结束监听	function(source, relation)	-
closeIcon		关闭线条的icon url	string	-

Column

列描述数据对象，是 columns 中的一项，Column 使用相同的 API。

参数		说明	类型	默认值
align		设置列的对齐方式	'left' | 'right' | 'center'	‘left
key		列数据在数据项中对应的 key	string
render		生成复杂数据的渲染函数，参数分别为当前行的值	Function(text, record, index) {} | string | Element
title		列头显示文字	string
width		列宽度	string	'100px'