這個問題困擾了我很久,網上也沒找到什么記錄方法,這里就記錄一下
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,此處是如圖
image.png
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