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; } } }) },