vue+element封装的下拉tree---input+tree

项目里好多页面要用到下拉树的菜单：

选择后如下：

决定写一个组件复用，这里就不写如何复用传参那些，就当一个哦普通的页面里的来写：

//  html

<el-input
    placeholder="请选择父级"
    v-model="regionLongcode"
    :suffix-icon="showTree?'el-icon-arrow-up':'el-icon-arrow-down'"
    @click.native="deptogglePanel($event)"
    size="medium"
    readonly="readonly"
></el-input>
<div v-if="showTree" class="treeDiv" ref="suoShuMenTree">
    <el-tree
    :default-expanded-keys="[0, 1]"   // 默认展开节点id
    :data="treeData"
    :props="defaultProps"
    accordion
    node-key="id"
    
    @node-click="handleRegionNodeClick"
    ></el-tree>
</div>




//  js

defaultProps: {           
  children: 'children',
  label: 'text'
},
showTree: false,
treeData: [               
],
regionLongcode: '',


//  事件
deptogglePanel (event) {
   event || (event = window.event)
    event.stopPropagation
        ? event.stopPropagation()
        : (event.cancelBubble = true)
    this.showTree ? this.dephide() : this.depshow()
},
depshow () {
    this.showTree = true
    document.addEventListener('click', this.dephidePanel, false)
},
dephide () {
    this.showTree = false
    document.addEventListener('click', this.dephidePanel, false)
},
dephidePanel (e) {
    if (
        this.$refs.suoShuMenTree &&
        !this.$refs.suoShuMenTree.contains(e.target)
    ) {
        this.dephide()
    }
},
//  点击tree节点
handleRegionNodeClick (data) {
    this.regionLongcode = data.text //所属区域名字
    this.showTree = false
    this.ids= data.id
},




//  css
// 这个下拉tree我是写在表单里面，所以相对于el-form-item定位的，可自行修改
.treeDiv{
    position:absolute;
     top:40px;
     left:-1px;
     z-index:1000;
     border: 1px solid #ccc;
     width: 100%;
     border-radius: 6px;
     overflow: hidden;
 }