1.问题
当选完值之后,实现点击其他地方能隐藏掉这个el-tree树。由于el-form-item这个元素本身不带失焦事件,所以我想到了,使用js给el-form-item添加点击事件,只要点击的范围不在el-form-item里面,就隐藏掉这个el-tree。
2.解决方案
2.1给el-form-item添加一个id
<el-form-item label='所属部门' id='formItem'>
<el-input v-model='form.deptId' @input='showDeptTree' ></el-input>
<el-tree
:data="deptTree"
v-if='isShowDeptTree'
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
:props="defaultProps">
</el-tree>
</el-form-item>
2.2 在mounted中添加监听事件
mounted() {
document.addEventListener('click', (e) => {
let formItem = document.getElementById("formItem");
if(formItem){
//如果点击的范围不在formItem中,则隐藏el-tree
if (!formItem.contains(e.target)){
this.isShowDeptTree = false;
}
}
})
},