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