Element-UI 在使用 el-dialog 中使用 this.$refs.tree 获取组件报错

最新推荐文章于 2025-06-16 01:18:19 发布

原创最新推荐文章于 2025-06-16 01:18:19 发布 · 5.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Element-UI 在使用 el-dialog 中使用 this.$

Element-UI 专栏收录该内容

2 篇文章

订阅专栏

在使用Element-UI的el-dialog组件时，直接通过this.$refs获取内部的el-tree组件可能会遇到问题。本文介绍了一种解决方法，即使用setTimeout或this.$nextTick来确保DOM更新完成后再进行操作。

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

使用 element-ui 的 el-dialog 时，使用 this.$refs.tree 获取 el-tree 报错：

<el-dialog title="菜品分配医嘱" :visible.sync="foodAdvice" width="40%"
@close="handleDialogClose" append-to-body>
	<div class="tree-box custom-scrollbar">
		<el-tree ref="tree" :data="adviceTree" show-checkbox node-key="adviceName" :props="defaultProps"></el-tree>
	</div>
	<span slot="footer">
		<el-button @click="foodAdvice = false" size="small">取消</el-button>
			<el-button type="primary" size="small" @click="saveAdvice">保存</el-button>
	</span>
</el-dialog>

这样直接在 dialog 弹出时直接使用 this.$refs.tree 是获取不到的。
解决办法：

// 使用 setTimeout
setTimeout(() => {
	this.$refs.tree.setCheckedKeys([]);
}, 100);
// 或者使用 this.$nextTick
this.$nextTick(() => {
	this.$refs.tree.setCheckedKeys([]);
});