Vue系列---【使用js给elmentui组件中的el-from-item添加点击事件】

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