剪彩花,k552次列车,钟尔璞
现象：
使用element ui渲染了一个树形结构，设计在鼠标移入每个节点是显示其中的操作按钮，效果如下：
下面是出错部分：
在新增节点后移入新增节点附近(图中是移入一级2)，功能按钮的显示位置出现偏移
原因查找：
经过调试发现是在新增节点后，执行dom操作获取节点时，取到的仍是之前的结构，新增的节点并未获取到。
原因分析：
猜测是vue使用的虚拟dom，使得页面虽然已经渲染出来，但在vue实例中让处在在虚拟dom中，无法获取。
解决方法：
使用vue.nexttick，看下官方材料：
‘在下次 dom 更新循环结束之后执行延迟回调'，这句话不是特别理解，不过可以看出dom更新是一个循环的过程，在过程结束之前无法获取到真实的dom元素(至于这个循环是多久，还在探索中)。而将dom操作放在nexttick中操作便可以获取到更新后的dom。
结果：
依据上述原理，将dom操作的函数在更新数据后在nexttick里调用，实现了理想中的效果。
以上这篇解决vue页面dom操作不生效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
我要评论
网友评论