使用中需要注意的一点是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 | - |
参数 | 说明 | 类型 | 默认值 | |
---|---|---|---|---|
align | 设置列的对齐方式 | 'left' | 'right' | 'center' | ‘left | |
key | 列数据在数据项中对应的 key | string | ||
render | 生成复杂数据的渲染函数,参数分别为当前行的值 | Function(text, record, index) {} | string | Element | ||
title | 列头显示文字 | string | ||
width | 列宽度 | string | '100px' |