1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > el-select结合el-tree实现树形下拉框(不带多选框)

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

时间:2022-09-26 09:54:23

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。