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

使用 element-uiel-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([]);
});

猜你喜欢

转载自blog.csdn.net/LonewoIf/article/details/87926144