使用中需要注意的一点是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' |