bootstrap获取下拉框数据_⼿把⼿教学~基于element封装tree
树状下拉框
在⽇常项⽬开发中，树状下拉框的需求还是⽐较常见的，但是element并没有这种组件以供使⽤。在这⾥，⼩编就基于element如何封装⼀个树状下拉框做个详细的介绍。
通过这篇⽂章，你可以了解学习到⼀个树状下拉框组件是如何⼀步⼀步封装成功的。
话不多说，先看效果图：
封装组件
该组件主要基于element的select组件、tree组件及input组件进⾏⼆次封装的。
组件布局
⾸先我们需要基于这⼏个组件对我们的组件进⾏布局，话不多说直接上代码：
<el-select ref="select">
<el-option class="options">
<el-tree  id="tree-option"
ref="selectTree"
>
</el-tree>
</el-option>
</el-select>
</template>
<style scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
height: auto;
max-height: 274px;
padding: 0;
overflow: hidden;
overflow-y: auto;
}
.el-select-dropdown__item.selected{
font-weight: normal;
}
ul li >>>.el-tree .el-tree-node__content{
height:auto;
padding: 0 20px;
}
.el-tree-node__label{
font-weight: normal;
}
.el-tree >>>.is-current .el-tree-node__label{
color: #409EFF;
font-weight: 700;
}
.el-tree >>>.is-current .el-tree-node__children .el-tree-node__label{
color:#606266;
font-weight: normal;
}
</style>
注：css添加scoped属性，是为了让css只在该组件⽣效，避免样式污染
这个时候直接使⽤肯定是会报错的，因为我们组件该传的参数还未传递。
组件数据完善
上⾯我们已经完成了布局，接下来就是为其丰富数据了，因为我们这个组件肯定是复⽤的，因此我们
设计数据的时候，需要把常⽤的数据属性提取出来通过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之后，我们就开始对组件进⾏数据的处理，直接上代码：
<template>
<el-select  :placeholder="placeholder" ref="select">
<el-option class="options">
<el-tree  id="tree-option"
ref="selectTree"
:accordion="accordion"
:data="options"
:props="props"
:node-key="props.value"
:default-expanded-keys="[]"
>
</el-tree>
</el-option>
</el-select>
</template>
当数据过多的时候，滚动条会出现两条，如下所⽰：
处理⽅法如下：
// 初始化滚动条
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组件以及返回给⽗组件
代码如下：
<template>
<el-select :value="valueTitle" :placeholder="placeholder" ref="select">
<el-option :value="valueTitle" :label="valueTitle" class="options">
<el-tree  id="tree-option"
ref="selectTree"
:accordion="accordion"
:data="options"
:props="props"
:node-key="props.value"
:default-expanded-keys="defaultExpandedKey"
@node-click="handleNodeClick"
>
</el-tree>
</el-option>
</el-select>
</template>
element表格横向滚动条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组件的默认展开节点
代码如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。