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;
 }