html:
<div class="myTree" id="myTree"> <el-form-item :label="labelTitle" :label-width="labelWidth" :prop="prop"> <el-input v-model="orgName" :placeholder="placeholder1" @click.native.stop="showTree" v-bind:class="{inputWidth : isNeed}"></el-input> <div class="myTree-list" :style="{height: popHeight}" v-show="isShowTree" @click.stop="stopMp"> <div class="tree-wrapper" :style="{height:height}"> <el-input class="tree-input" prefix-icon="el-icon-search" :placeholder="placeHolder" v-model="filterText"></el-input> <el-tree class="filter-tree" :empty-text="emptyText" :highlight-current="true" :expand-on-click-node="false" auto-expand-parent default-expand-all :node-key="nodeKey" :lazy = "lazy" :data="data" :props="defaultProps" @node-click="handleNodeClick" :filter-node-method="filterNode" :default-expanded-keys="expandedKkeys" ref="tree"> <div slot-scope="{ node, data }" :class="{'isXm':data.isLeaf, 'isOrg': !data.isLeaf&&!isSeletOrg}"> {{data.name}} </div> </el-tree> </div> </div> </el-form-item> </div>
js:
... mounted () { document.addEventListener('mouseup',(e) =>{ var _con = document.getElementById('myTree') if(_con) { if(!_con.contains(e.target)) { this.isShowTree = false } } }) } ...