vue---vis.js动态加载图谱之unshift踩坑记

问题描述:用vue做一个类似于如下图的neo4j的图谱管理系统,当每一次点击左侧标签时,往右侧搜索框下的顶部位置插入一个图。

解决方案:图谱数据通过数据驱动【 <div class="graph" v-for="(item ,index) in graphData" :key="item.index">...</div>】

当每一次点击左侧标签时,往右侧搜索框下的顶部位置插入一个图,即在graphData中顶部插入一条数据【this.graphData.unshift(data);】。

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

问题来了,当插入数据后,上一次渲染的图不见了,原因是当往【graphData】unshift 添加一条数据时,dom结构中渲染的数据发生了变化,原先【graphData】中的第一条数据被顶到第二的位置,之前渲染图的数据发生了位置变动,所以图就不见了,如果是往【graphData】末尾添加数据则不存在这个问题。

解决方法很无奈,当每次插入一条数据,只能把图都重新渲染一遍。如果有好的方法,请各位大佬不吝赐教。

visjs使用见:vue---vis实现复杂网状关系图显示

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章