组件加载完后，如果上面有元素的高度发生变化，会导致连线的定位不准确

[aisriver]

const sourceCols = [ { title: '源表字段', key: 'name', width: '80px' }, { title: '类型', key: 'type', width: '100px' }, { title: '描述', key: 'desc', width: '150px' }, { title: '操作', key: 'operate', width: '80px', align: 'center', render: (value, record) => { return <a href="javascript:void(0);" onClick={ () => { alert(JSON.stringify(record)); } }>查看详情; }} ]; const targetCols = [ { title: '目标表字段', key: 'name', width: '50%' }, { title: '类型', key: 'type', width: '50%' } ]; const sData = new Array(7).fill().map((item, idx) => ({ name: field${idx + 1}, type: 'string', key: field${idx + 1}, desc: 这是表字段field${idx + 1}, operate: 测试${idx} })); const tData = new Array(11).fill().map((item, idx) => ({ name: field${idx + 4}, type: 'string', key: field${idx + 4} })) class App extends React.PureComponent { constructor(props) { super(props); this.state = { relation: [], sourceData: [], targetData: [] }; } getRelation() { console.log(this.state.relation); alert(JSON.stringify(this.state.relation)); } sameLine() { const {sourceData, targetData} = this.state; const len = sourceData.length > targetData.length ? targetData.length : sourceData.length; const relation = []; for(let i=0; i<len; i++ ) { relation.push({ source: sourceData[i], target: targetData[i] }); } this.setState({ relation }); } sameName() { const {sourceData, targetData} = this.state; const relation = []; sourceData.map(item => { targetData.map(n => { if(item.name === n.name) { relation.push({ source: item, target: n }); } }); }); this.setState({ relation }); } cancelRelation() { this.setState({ relation: [] }); } getData=()=>{ this.setState({ sourceData: sData, targetData: tData }) } render() { const { sourceData, targetData } = this.state; const option = { source: { data: sourceData, onChange: (data) => { // isSort开启后，必须开启才会生效 this.setState({ sourceData: data }); }, columns: sourceCols }, target: { data: targetData, onChange: (data) => { this.setState({ targetData: data }); }, columns: targetCols }, relation: this.state.relation, // onDrawStart: (source, relation) => { // console.log("onDrawStart: ", source, relation); // }, // onDrawing: (source, relation) => { // console.log("onDrawing: ", source, relation); // }, // onDrawEnd: (source, target, relation) => { // console.log("onDrawEnd: ", source, relation); // }, onChange: (relation) => { this.setState({ relation }); }, isSort: true }; return

{this.state.visible&&

}
获取映射关系 同行关联 同名关联 取消关联 this.setState({visible: !this.state.visible})}>显隐 加载数据

  </div>
</div>;

} }

ReactDOM.render( , document.getElementById('Test') );

在https://codepen.io/godIsMe/pen/xvgYdx中打开： 把上面的代码拷贝进去，操作：显隐 -- 加载数据 -- 连线 可以复现

shaojun427 commented 4 years ago

Duplicate of #13 和这个需求一样

shaojun427 commented 4 years ago

1.0.4 fixed

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[shaojun427]

Duplicate of #13 和这个需求一样

[shaojun427]

1.0.4 fixed