本文探讨了在Element UI的对话框组件中，如何正确获取内部DOM元素的问题。直接在显示对话框后立即尝试获取DOM节点可能导致获取到null，因为DOM更新可能尚未完成。正确的做法是在设置dialogVisible为true后，使用Vue的nextTick方法，等待DOM更新完成后再进行DOM节点的获取。这确保了DOM节点能够被正确地获取到。
存在对话框：
<el-dialog :visible.sync="dialogVisible">
<div id="devModel"></div>
</el-dialog>
问题代码：
this.dialogVisible = true
let dom = document.getElementById('devModel')
console.log(dom) // 打印出dom为null
正确代码：
this.dialogVisible = true
this.$nextTick(()=>{
let dom = document.getElementById('devModel')
console.log(dom)
})
必须使用nextTick，否则初次打开对话框时获取不到里面的dom节点。
扫一扫
1263
到【灌水乐园】发言
