问题描述：如图

解决方法：

1、解决思路：设置标志【selectDeptFlag】，当【this.selectDeptFlag=true】时框显示，【this.selectDeptFlag=false】时框隐藏。当点击非框内的的区域（定义全局点击事件），设置【this.selectDeptFlag=false】，当点击框内区域【this.selectDeptFlag=true】，当点击【选择部门】按钮则设置【this.selectDeptFlag = !this.selectDeptFlag】；注意给按钮和框的点击事件加上阻止冒泡，不加的话会受全局点击事件冒泡影响。

2、具体方法如下：

（1）【选择部门】按钮和【选择上级部门】框页面代码如下：

 <el-button icon="el-icon-s-operation" @click.stop="selectDept">选择部门</el-button><!-- 选择上级部门框 --><div class="dept-list" v-show="selectDeptFlag" @click.stop="showSelectDept"><div><div class="title">选择上级部门</div><hr /><div><el-tree:data="deptTree"id="dept-tree"node-key="id"default-expanded-all:props="deptTreeProps":expand-on-click-node="true"@node-click="selectParentDept"><div class="tree-node-group" slot-scope="{ node, data }"><span class="tree-node-title"><span class="node-label">{{ node.label}}</span></span></div></el-tree></div></div></div>

（2）定义全局点击事件：

在【main.js】中定义全局点击函数

// 定义全局点击函数
Vue.prototype.globalClick = function(callback) {document.getElementById("content").onclick = function() {callback();};
};

（3）在组件中调用全局点击函数，并在全局函数中调用【hideSelectDept】，实现隐藏【选择上级部门】框。

  mounted: function() {//隐藏选择上级部门框this.globalClick(this.hideSelectDept);},
methods:{// 隐藏选择上级部门hideSelectDept() {this.selectDeptFlag = false;}}

（4）在【选择部门】按钮和框的点击事件加上阻止冒泡。【@click.stop="..."】

methods:{// 点击选择部门按钮，控制框显示与否selectDept() {this.selectDeptFlag = !this.selectDeptFlag;},// 显示选择上级部门showSelectDept() {this.selectDeptFlag = true;},// 隐藏选择上级部门hideSelectDept() {this.selectDeptFlag = false;}
}