对话框中使用el-input和el-tree做树形组件表单元素，解决点击其他区域树形组件无法自动收回的bug

本文链接：https://blog.youkuaiyun.com/qq_27470647/article/details/105251881

本文介绍了在Vue项目中，如何解决el-input与el-tree组合使用时，点击其他区域树形组件无法自动隐藏的问题。通过监听body的click事件，判断点击的元素是否为输入框，实现树形组件的智能隐藏。同时，文章还讨论了el-select与el-dialog的交互bug及其解决方案，并提供了一个更优雅的updated回调处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对话框中表单某一项以树的形式展示，点击el-input弹出el-tree树形组件后如果不继续点击选择树节点而是点击其他地方（或者直接关闭对话框），树形组件收不回去了（不能像下拉框表单一样自动隐藏收回去），这个是有解决办法的，即通过监听body的click事件，然后判断鼠标点击的dom(event.target)是不是点击弹出树形组件的那个input，如果不是，就让树形组件隐藏，如果是，就不做任何操作，具体代码如下：
template里面：

<el-form-item label="工作组" prop="workGroupName">
  <el-input v-model="form.workGroupName" @focus="showWorkGroupTree" class="workGroupItem" auto-complete="off" :clearable="isClearable"></el-input>
  <el-tree
    ref="workGroup"
    :data="workGroups"
    :props="defaultProps"
    class="workGroupTree workGroupItem"
    node-key="id"
    default-expand-all
    v-show="workGroupTreeShow"
    @node-click="handleNodeClick"
    :expand-on-click-node="false">
  </el-tree>
</el-form-item>

script里面：

mounted() {
    let dom = document.getElementsByClassName('workGroupItem');
    document.body.addEventListener('click', (e)=> {
      e = window.event || e;
      var target = e.target || e.srcElement;
      // flagParent是用来判断点击的是不是class为workGroupItem的el-input的标志,如果为-1,则点击的不是class为workGroupItem的el-input
      var flagParent = target.offsetParent.className.indexOf('workGroupItem');
      if (flagParent == -1) {
        this.workGroupTreeShow = false;
      }
    });
},

OK，问题解决~
后期经实践发现上述代码还有一点不完善，就是当打开对话框，点击弹出树形组件后，再去点击对话框以外区域(即div.el-dialog__wrapper)时树形组件仍不能收回去，为了让树形组件除了点击与它相关联的el-input 这种情况，其他情况的点击都能收回去，完善代码逻辑如下：
script里面：

mounted() {
    // 解决工作组树形组件弹出后