el-dialog获取其中的dom节点方法

本文探讨了在Element UI的对话框组件中,如何正确获取内部DOM元素的问题。直接在显示对话框后立即尝试获取DOM节点可能导致获取到null,因为DOM更新可能尚未完成。正确的做法是在设置dialogVisible为true后,使用Vue的nextTick方法,等待DOM更新完成后再进行DOM节点的获取。这确保了DOM节点能够被正确地获取到。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

存在对话框:

<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节点。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值