el-select结合el-tree实现树形下拉框（不带多选框）

效果图：

完整代码：

<el-select v-model="form.dept.id" clearable filterable placeholder="请选择" ref="selectTree" @clear="selectTreeChange">
   <el-option 
    :key="form.dept.id"
    :value="form.dept.id" 
    :label="form.dept.label"
    style="height:auto;"
    hidden>
    </el-option>
    
    <el-tree 
    ref="tree" 
    :data="formSearch.deptList" 
    :props="defaultTreeProps" 
    node-key="id" 
    @node-click="handleNodeClick" 
    :accordion="true"
    :default-expanded-keys="defaultTreeExpand"
    :highlight-current="true"></el-tree>
</el-select>

data(){
return{
	form:{
	   dept:{
               id:'',
               label:''
           }
  		},
	defaultTreeProps: {
         children: "children",
         label: "label"
     },
     defaultTreeExpand:[],
}
}

selectTreeChange(){
   this.form.dept.label=""
    this.defaultTreeExpand=[]
},
handleNodeClick(val){
    this.defaultTreeExpand=[]
    this.form.dept.id=val.id
    this.form.dept.label=val.label
    this.defaultTreeExpand.push(val.id)
    // 选择器执行完成后，失去焦点
    this.$refs.selectTree.blur()
},