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

对话框中表单某一项以树的形式展示，点击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() {
    // 解决工作组树形组件弹出后 点击其他位置不能收回去的bug
    let