使用中需要注意的一点是relation,是由组件内部控制的,所以是不受控的,连线后组件内部relation改变,连线也是组件内部控制。但是外部传入的relation是可以改变内部的relation,在组件内会监听传入的relation,可以在onChange的时候改变传入的relation,来达到受控的效果,如果onChange的时候不改变传入的relation,那么relation就是defaultRelation的效果。
参数
说明
类型
默认值
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
-
列描述数据对象,是 columns 中的一项,Column 使用相同的 API。
参数
说明
类型
默认值
align
设置列的对齐方式
'left' | 'right' | 'center'
‘left
key
列数据在数据项中对应的 key
string
render
生成复杂数据的渲染函数,参数分别为当前行的值
Function(text, record, index) {} | string | Element
title
列头显示文字
string
width
列宽度
string
'100px'