vue：下拉树结构，el-select实现

下拉框框内显示的选项为树结构加载，效果如下图显示：

前端html代码

<el-select ref="select" v-model="selectName" placeholder="请选择区域" clearable >
   <div class="put">
     <el-input
       v-model="searchAreaVale"
       placeholder="请输入搜索区域关键字"
       suffix-icon="h-icon-search"
       clearable
       @click="handleIconClick"
     ></el-input>
   </div>
   <el-option key="id" hidden :value="selectVal" :label="selectName" />
   <div class="h-tree">
     <el-tree
       style="padding: 0px 10px 10px 0px"
       :data.sync="optionsMetaAll"
       :props="defaultProps"
       node-key="code"
       parent-key="parentId"
       simple-data
       lazy
       :load="loadTree"
       @node-click="handleNodeClick"
     ></el-tree>
   </div>
 </el-select>

主要实现思路，通过 hidden 去隐藏下来框已有的选项卡，然后再去自定义自己的样式，点击树结构的节点，或者其他操作想收回下拉框时候，调用el-select的handleClose（）函数，即可收回下拉框，我自己的业务逻辑为点击树节点，选中即可收回

/**此操作的回调为树结构的api，不明白可以查看树结构api*/
handleNodeClick(data, node) {
   if (node.isLeaf == false) {
   	return
   }
   /**
   * 将选中的值显示到下拉选择框上，并收回下拉框
   */
   this.selectVal = data.name // select绑定值为点击的选项的value
   this.selectName = data.name // input中显示值为label
   this.treeFilter = '' // 点击后搜索框清空
   this.searchAreaVale = '' //清空搜索项
   this.$refs.select.handleClose() // 点击后关闭下拉框，因为点击树形控件后select不会自动折叠
},