这个问题困扰了我很久,网上也没找到什么记录方法,这里就记录一下
image.png
需求是这样的,点击可以折叠下面表格字段,连线连到外面的表头上,但是由于jsplumb并不知道dom变化了,所有连接点left center位置还是连在外面,下图这样
image.png
理想中的点应该是在表头中间位置
拖拽锚点以后才恢复正常
image.png
image.png
下面说说解决方法把:先revalidate(el), 再repaint(el)
await delay(0); // setTimeout 的封装
let el = $(`#${tableId}`)[0]; // dom
try{
this.chart.jp.revalidate(el);
}catch(e){
this.chart.jp.repaint(el)
}
1、 await delay(0); 这行代码必须写,否则不生效
,应该是dom变化了el不准确
2、 el是需要更新的dom,此处是如图
3、this.chart.jp 是封装的chart对象的实例
import { jsPlumb} from 'jsplumb';
export default class {
constructor(container) {
this.jp = jsPlumb.getInstance();
this.setContainer(container)
}
setContainer(container) {
this.jp.setContainer(container);
}
}
// 组件中
this.chart = new Chart("flow_container");
this.chart.jp.revalidate(el) jsplumb内部会报错,但也找不到原因,所有try catch下,
image.png
然后就完美解决了
image.png
网友评论