单页面网站入侵,虾皮跨境电商app下载,做旅行的网站,深圳建安公司入职要求在日常项目开发中#xff0c;树状下拉框的需求还是比较常见的#xff0c;但是element并没有这种组件以供使用。在这里#xff0c;小编就基于element如何封装一个树状下拉框做个详细的介绍。通过这篇文章#xff0c;你可以了解学习到一个树状下拉框组件是如何一步一步封装成… 在日常项目开发中树状下拉框的需求还是比较常见的但是element并没有这种组件以供使用。在这里小编就基于element如何封装一个树状下拉框做个详细的介绍。通过这篇文章你可以了解学习到一个树状下拉框组件是如何一步一步封装成功的。话不多说先看效果图封装组件该组件主要基于element的select组件、tree组件及input组件进行二次封装的。组件布局首先我们需要基于这几个组件对我们的组件进行布局话不多说直接上代码selectoptionstree-option refselectTree 注css添加scoped属性是为了让css只在该组件生效避免样式污染这个时候直接使用肯定是会报错的因为我们组件该传的参数还未传递。组件数据完善上面我们已经完成了布局接下来就是为其丰富数据了因为我们这个组件肯定是复用的因此我们设计数据的时候需要把常用的数据属性提取出来通过props传递接收。我提取的主要有几下几个数据:props:{ /* 配置项 */ props:{ type: Object, default:(){ return { value:id, // ID字段名 label: title, // 显示名称 children: children // 子级字段名 } } }, /* 选项列表数据(树形结构的对象数组) */ options:{ type: Array, default: (){ return [] } }, /* 初始值 */ value:{ default: (){ return null } }, /* 可清空选项 */ clearable:{ type:Boolean, default:(){ return true } }, /* 自动收起 */ accordion:{ type:Boolean, default:(){ return false } }, placeholder:{ type:String, default:(){return 请选择} } },大家可能注意到我所有prop字段都给了type属性唯独value没有这是因为在实际使用中下拉框的数据value值可能是字符串(String)也可能是数字(Number)为了项目开发中控制台不报太多无意义的错此处就没有规定其type。接收到prop之后我们就开始对组件进行数据的处理直接上代码placeholder refselectoptionstree-option refselectTree :accordionaccordion :dataoptions :propsprops :node-keyprops.value :default-expanded-keys[] 当数据过多的时候滚动条会出现两条如下所示处理方法如下// 初始化滚动条initScroll(){ this.$nextTick((){ let scrollWrap document.querySelectorAll(.el-scrollbar .el-select-dropdown__wrap)[0] let scrollBar document.querySelectorAll(.el-scrollbar .el-scrollbar__bar) scrollWrap.style.cssText margin: 0px; max-height: none; overflow: hidden; scrollBar.forEach(ele ele.style.width 0) })},在mounted中调用该方法就可以了效果如下点击选中数据也渲染显示出来了这个时候我们需要实现点击数据选中功能。思路很简单select组件绑定value值tree组件绑定节点点击事件点击事件中获取value和label将获取的值赋给select组件以及返回给父组件代码如下valueTitle :placeholderplaceholder refselectvalueTitle :labelvalueTitle classoptionstree-option refselectTree :accordionaccordion :dataoptions :propsprops :node-keyprops.value :default-expanded-keysdefaultExpandedKey node-clickhandleNodeClick data() { return { valueId:this.value,// 初始值 valueTitle:, defaultExpandedKey:[] }},// 切换选项handleNodeClick(node){ this.valueTitle node[this.props.label]//获取label this.valueId node[this.props.value]//获取value this.$emit(getValue,this.valueId)//传值给父组件},这样点击选中功能就实现了但是有个问题点击之后下拉框选项没有隐藏我们只需要再调用一下select组件的blur方法即可实现隐藏数据初始化细心的小伙伴肯定已经发现了上面有一个初始值并且在选择器中初始数据也是必不可少的。实现思路如下watch监听prop中value数据变化将初始值做对应赋值获取初始值对应的label并做对应赋值设置tree组件的默认选中状态设置tree组件的默认展开节点代码如下watch: { value(){ this.valueId this.value this.initHandle() }},// 初始化值initHandle(){ if(this.valueId){ // 初始化显示label this.valueTitle this.$refs.selectTree.getNode(this.valueId).data[this.props.label] this.$refs.selectTree.setCurrentKey(this.valueId)// 设置默认选中 this.defaultExpandedKey [this.valueId]// 设置默认展开 } },在mounted中调用执行既可清除选中一般输入框或者选择器都有清除功能我们的组件自然也少不了清除功能实现思路如下给select组件设置clearable属性给select组件添加清除监听事件在监听事件中清除tree组件选中并清除父组件中的值代码如下valueTitle :clearableclearable clearclearHandle :placeholderplaceholder refselect// 清除选中clearHandle(){ this.valueTitle this.valueId null this.defaultExpandedKey [] this.clearSelected() this.$emit(getValue,null)},/* 清空选中样式 */clearSelected(){ let allNode document.querySelectorAll(#tree-option .el-tree-node) allNode.forEach((element)element.classList.remove(is-current))},筛选数据当tree中数据量过大时我们需要筛选数据实现思路如下给tree组件添加filter-node-method方法添加一个输入框输入筛选的内容监听输入内容变化并调用tree组件的筛选方法代码如下valueTitle :clearableclearable clearclearHandle :placeholderplaceholder refselect classselectInput placeholder检索关键字 v-modelfilterTextvalueTitle :labelvalueTitle classoptionstree-option refselectTree :accordionaccordion :dataoptions :propsprops :node-keyprops.value :default-expanded-keysdefaultExpandedKey :filter-node-methodfilterNode node-clickhandleNodeClick.selectInput{ padding: 0 5px; box-sizing: border-box;}filterNode(value, data) { if (!value) return true; return data.name.indexOf(value) ! -1;}watch: { filterText(val) { this.$refs.selectTree.filter(val); }},这样一个简单的树状下拉框组件就封装好了。使用组件下面给个简单的使用示例 :propsdefaultProps :optionstreeData :valuevalue :accordiontrue getValuegetValue($event) placeholder请选择所属区域 /选中的id{{value}}
