效果图:
完整代码:
<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.idthis.form.dept.label=val.labelthis.defaultTreeExpand.push(val.id)// 选择器执行完成后,失去焦点this.$refs.selectTree.blur()},