现象:
使用Element UI渲染了一个树形结构,设计在鼠标移入每个节点是显示其中的操作按钮,效果如下:
下面是出错部分:
在新增节点后移入新增节点附近(图中是移入一级2),功能按钮的显示位置出现偏移
原因查找:
经过调试发现是在新增节点后,执行DOM操作获取节点时,取到的仍是之前的结构,新增的节点并未获取到。
原因分析:
猜测是vue使用的虚拟DOM,使得页面虽然已经渲染出来,但在Vue实例中让处在在虚拟DOM中,无法获取。
解决方法:
使用Vue.nextTick,看下官方材料:
‘在下次 DOM 更新循环结束之后执行延迟回调’,这句话不是特别理解,不过可以看出DOM更新是一个循环