前言
同事开发拓扑组件时,碰到一个谜题,让我解决一下。在拓扑节点展开收缩时,收缩是正常的,而在节点展开时,拓扑节点渲染的不正常,节点的label不更新。
节点收缩前的lable值各不相同:
节点收缩后再展开的label值出现了问题:
问题排查
首先我查看代码逻辑,排查了好久好久,发现代码逻辑没什么问题,而且节点nodes的DataSet数据也更新了,数据更新了但是页面上渲染出来的label值没更新。
很奇怪,我开始以为是数据源的问题,拿了一份完好的数据源,还是有这个问题的出现。
我又自己写了个简单的demo测一下,发现果然有这个问题的存在。不服气,换方向接着排查。
不是数据源的问题,不是代码逻辑的问题,那只能在拓扑配置处出现了问题,经过长时间的努力,最后发现是一行代码导致的 this.network = network
。这行去掉就没问题了!气死了。
注意
network不能挂载到vue 的data 中。需要使用的话挂在window上就行了。