vis-network节点展开收缩问题(大坑)

在开发Vue应用时,遇到一个拓扑组件的渲染异常问题。当节点展开时,节点的label值未能正确更新,尽管数据源已经变更。经过深入排查,发现问题是由于将`network`对象挂载到vue的data中导致的。移除这行代码`this.network=network`后,问题得到解决。解决方案是将`network`保存在全局变量如window上,而非vue实例的data中。
摘要由CSDN通过智能技术生成

前言

同事开发拓扑组件时,碰到一个谜题,让我解决一下。在拓扑节点展开收缩时,收缩是正常的,而在节点展开时,拓扑节点渲染的不正常,节点的label不更新。

节点收缩前的lable值各不相同:
在这里插入图片描述
节点收缩后再展开的label值出现了问题:
在这里插入图片描述

问题排查

首先我查看代码逻辑,排查了好久好久,发现代码逻辑没什么问题,而且节点nodes的DataSet数据也更新了,数据更新了但是页面上渲染出来的label值没更新。

很奇怪,我开始以为是数据源的问题,拿了一份完好的数据源,还是有这个问题的出现。

我又自己写了个简单的demo测一下,发现果然有这个问题的存在。不服气,换方向接着排查。

不是数据源的问题,不是代码逻辑的问题,那只能在拓扑配置处出现了问题,经过长时间的努力,最后发现是一行代码导致的 this.network = network 。这行去掉就没问题了!气死了。

注意

network不能挂载到vue 的data 中。需要使用的话挂在window上就行了。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值