elementui使用select组件和tree组件实现下拉树形选择器

1、element-ui使用select组件和tree组件实现下拉树形选择器template部分<el-selectclass="select"><el-optionclass="option"><el-treeclass="tree"></el-tree></el-option></el-select>个三级嵌套就可以搞定css部分.optionheight:auto;line-height:1;padding:0;background-color:#fff;.tr

2、eepadding:4px20px;font-weight:400;网上的办法大多都是直接在option上写，给option加一个高度，然后overflow:auto,这样会有问题，因为select本身使用的是element-ui自己的滚动条组件，max-height为274px,旦option设置高度过大，会出现双重滚动条，而且原生滚动条真的有点丑，其实这里只需要给option加一个height:auto，就可以使用select自带的滚动条，不需要单独再加其他滚动。发现两个问题1. 当树展开的时候，动画不流畅，会抖动一下。分析了一下已有的css，发现是因为option本身设置了line-he

3、ight:34px;而树形里没有设置line-height，设置的是高度为26px。这里直接把option的line-height改为1,果然动画流畅了，舒服了。2. 当option被选中时，树节点所有的文字都会加粗，随便设置一个font-weight:400就行。jS部分要解决几点1点击树时，下拉框不会自动隐藏，一看文档也没有控制下拉框显示隐藏的属性，然后在select组件源码中找到了visible，控制下拉框显示隐藏点击树时设置this.$refs.select.visible=false2. 数据回显，通过tree的setCurrentKey方法设置当前高亮的节点，通过getNode方法

4、获取当前id对应的node,拿到对应的label3. 不管选没选择内容，打开下拉框的时候，滚动条永远在最底部，实在是太难受了。而一想到是不是不能借助select的滚动，而要给option设置滚动时就更难受了。但是给option设置滚动后，发现滚动条永远在最顶部，舒服了，也有问题。突然想到，一个正常不魔改的select组件，选中哪个option时，打开下拉框总能定位到那个选中的，这肯定是select组件内部有个方法做的，偷过来用就行。然后就找到了这个scrollToOption(option)consttarget=Array.isArray(option)&&option0?o

5、ption0.$el:option.$el;if(this.$refs.popper&&target)constmenu=this.$refs.popper.$el.querySelector('.el-select-dropdown_wrap');scrolllntoView(menu,target);this.$refs.scrollbar&&this.$refs.scrollbar.handleScroll();,scrollToOption?拿来吧你很明显，要传入一个option对象，而option的$©1属性是一个dom,则表

6、现形式就是一个Vue的实例，我这边直接用querySelector获取一个dom,传入$el:dom也能用。再然后就是找这个dom,发现当树某一节点被点击时，其class会多一个is-current,那么就可以这样写：letselectDom=document.querySelector('.is-current')this.$refs.select.scrollToOption($el:selectDom)ps:只针对单选做的，多选还需按照情况改。组件全部代码<template><el-selectref="select":value=&

7、quot;value"placeholder请选择"size="mini"visible-change="visibleChange"clearablestyle="width:100%;"clear="clear"><el-optionref="option"class="option":value="optionData.id":label="optionD"><el-tr

8、eeref="tree"class="tree":node-key="nodeKey":data="data":props="props":default-expanded-keys='value'highlight-current:expand-on-click-node="false"node-click="handleNodeClick"></el-tree></el-option></el-sel

9、ect></template><script>exportdefaultname:'TreeSelect',props:/v-model绑定value:type:String,Number,default:''，/树形的数据data:type:Array,default:function()return,/每个树节点用来作为唯一标识的属性nodeKey:type:String,Number,default:'id',/tree的props酉己置props:type:Object,default:function()r

10、eturnlabel:'label',children:'children',data()returnreturnoptionData:id:'',name:''，watch:'value':function(val)if(!this.isEmpty(this.data)this.init(val),'data':function(val)if(!this.isEmpty(val)this.init(this.value),mounted。if(!this.isEmpty(this.data)thi

11、s.init(this.value),methods:/isEmpty(val)for(letkeyinval)returnfalsereturntrue,handleNodeClick(data)letlabel=psabel|'name'this.$emit('input',datathis.nodeKey)this.optionData.id=datathis.nodeKeythis.optionD=datalabelthis.$refs.select.visible=false,init(val)if(val)this.$

12、nextTick()=>letlabel=psabel|'name'this.$refs.tree.setCurrentKey(val)letnode=this.$refs.tree.getNode(val)this.optionData.id=valthis.optionD=nodeabel)elsethis.$refs.tree.setCurrentKey(null),visibleChange(e)if(e)letselectDom=document.querySelector('.is-current')setTim

13、eout()=>this.$refs.select.scrollToOption($el:selectDom),0),clear()this.$emit('i叩ut；'')</script><stylelang="scss"scoped>.optionheight:auto;line-height:1;padding:0;在组件中的使用<template><divclass="container"><cy-tree-selectv-model="value&qu

14、ot;:data="list"style="width:240px;"></cy-tree-select></div></template><script>exportdefaultdata()returnlist:label:系统'，id:1,children:label:'用户',id:2,label:'用户组',id:3,label:'角色',id:4,label:'菜单',id:5,label:'组织架构',id:6,label:商品'，id