elementui 文本框里放树形结构

直接上代码吧

<el-form-item label="所属区域：" prop="regionLongcode">
          <el-input
            placeholder="请选择区域"
            v-model="formScoure.regionLongcode"
            :suffix-icon="showTree?'el-icon-arrow-up':'el-icon-arrow-down'"
            @click.native="deptogglePanel($event)"
            size="medium"
          ></el-input>
          <div v-if="showTree" class="treeDiv" ref="suoShuMenTree">
            <el-tree
              class="suoshubumen"
              :data="regions"
              :props="regionProps"
              accordion
              node-key="id"
              :load="loadRegionList"
              lazy
              :default-expanded-keys="expandedRegionIds"
              :expand-on-click-node="false"
              @node-click="handleRegionNodeClick"
            ></el-tree>
          </div>
</el-form-item>
return {
      showTree: false
}
js:
// 点击空白关闭下拉菜单
    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()
      }
    },
handleRegionNodeClick (data) {
      this.regionInfo = data
      // this.showRegionTree = false
      this.formScoure.regionLongcode = this.regionInfo.name //所属区域名字
      this.showTree = false
    },