vue树形选择器（树形下拉框）
开局⼀张图，内容全靠编
基础功能
附加选择项
前⾔ 因为项⽬需要⼀个带⼆层展开的树形选择器，⽤elment的lect和tree组件组合起来虽然可以⽤但是改样式和添加其他功能太过⿇烦，所以就仿照element的lect样式⾃⼰写了⼀个类似的组件，其实主要功能很简单，主要是要模拟⼀些element的⼀些细节⽐较费时间，但好在是⾜够灵活，这样就可以想怎么改样式改功能都可以直接改。
使⽤
参数说明
参数名说明
value监听值
optionList下拉项列表
operateVisiable是否展⽰操作栏
⽰例
vue
tip
change⽅法⽤于将组件内的数据更新到⽗组件传⼊的监听值，⼿动实现双向绑定
<treeOptionSelect
:optionList="typeOptionList"
:value="collectType"
@change="(s)=>{collectType = s}"
:operateVisiable="true"
></treeOptionSelect>
js
tip optionList 中的选项如果有children则为展开项
data(){
return{
collectType:"",
typeOptionList:[
{
value:"选项1",
label:"选项1",
children:[
{
label:"⼀级 1",
value:"⼀级 1"
},
香港的美食
{
label:"⼀级 2",
value:"⼀级 2"
}
]
},
{
value:"选项3",
label:"选项3"
}
]
};
}
源码
直接拷⼊项⽬（vue，element，scss）使⽤即可
tip
使⽤前需要全局引⼊⼀下我⾃⼰封装的⼀本通⽤css主要⽤于flex布局
契约论<template>
<div class="tree_lect_box row-flex-start" @click="optionBoxVisble = !optionBoxVisble">
<i
class="el-icon-arrow-down arrow_icon"
:
礼仪歌
></i>
<transition name="slide">
<transition name="slide">
<div class="triangle_up" v-if="optionBoxVisble"></div>
</transition>
<transition name="slide">
<div
class="option_box column-start-center"
:
v-if="optionBoxVisble"
@click.stop
>
<div class="option_wrapper">
<template v-for="(item,index) in options">
<div class="tree_option_banner nowrap":key="index" @click.stop="optionClick(item)"> <div class="expand_icon_wrapper c_c" v-if="item.children">
<i
class="el-icon-arrow-down expand_icon c_c"
:
></i>
</div>
{{item.label}}
</div>
<template v-if="pand&&item.children">
<div
class="tree_option_banner nowrap"
v-for="(it,i) in item.children"
@click.stop="optionClick(it)"
:class="{
'last_option_banner':i===(item.children.length-1)
}"
:key="it.label"
>{{it.label}}</div>
</template>
</template>
</div>
<!--是否显⽰操作框-->
<div class="operate_banner row-space-between" v-if="operateVisiable">
<div class="row-flex-start">
<el-button class="operete_but c_c c_border">新建</el-button>
<el-button class="operete_but c_c c_border">删除</el-button>
</div>
<el-button type="primary"class="operete_but">保存</el-button>
</div>
</div>
</transition>
{{val}}
</div>
</template>
<script>
export default{
props:{
// 监听值
value:{
type: String
},缺点自我评价
// 下拉项列表
optionList:{
type: Array,
default:()=>{
return[];
}
},
// 是否展⽰操作栏
operateVisiable:{
type: Boolean,
default:fal
default:fal
}
},
computed:{
options(){
return this.optionList.map(x=>{
if(x.children)this.$t(x,'expand',fal)
return x
})
}
},
data(){
return{
val:this.value,
optionBoxVisble:true,
};
},
// ⼿动双向绑定
watch:{
value(n,o){
this.val = n
}
},
methods:{
optionClick(s){
if(s.children)return;
// 修改外部组件监听数据
this.$emit('change',s.value)
}
}
};
</script>
<style lang="scss" scoped>
.tree_lect_box {
position: relative;
height:34px;
cursor: pointer;
color: #606764;
出阁
padding:6px 0px 6px 20px;
楚辞的作者width:100%;
border-radius:4px;
border:1px solid rgba(236,236,236,1); background: #fff;
max-width:650px;
.arrow_icon {
position: absolute;
transform-origin: center center;
transition: transform 0.2s;
right:15px;
top:calc(50%-7px);
}
.triangle_up {
width:0;
height:0;
position: absolute;
top:calc(100%+4px);
left:30px;
z-index:2009;
border-left:8px solid transparent;
border-right:8px solid transparent;
border-bottom:8px solid #fff;
border-top-width:0;
border-bottom-color: #e8e8e8;
border-bottom-color: #e8e8e8;
}
.
triangle_up::after {
content:"";
width:0;
height:0;
position: absolute;
top:1px;
left:-7px;
z-index:2010;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #fff;
border-top-width:0;
人工智能之父}
.option_box {
position: absolute;
z-index:2000;
padding:10px 0px;
top:calc(100%+10px);
left:0px;
background: #fff;
width:100%;
border-radius:4px;
min-height:50px;
max-height:300px;
overflow-y: auto;
box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06); border:1px solid rgba(232,232,232,1);
// padding-bottom: 60px;
.tree_option_banner {
font-size:14px;
// z-index: 2002;
color: #999999;
position: relative;
width:100%;
height:34px;
padding:6px 0px 6px 20px;
}
.option_wrapper {
茶花开
width:100%;
overflow-y: auto;
flex:1;
}
.operate_banner {
position: absolute;
bottom:0;
width:100%;
z-index:2002;
padding:014px;
background: #fff;
height:60px;
.operete_but {
width:60px;
height:32px;
}
}
.last_option_banner {
margin-bottom:8px;
}
.last_option_banner::after {
content:"";
position: absolute;
width:calc(100%-40px);
bottom:0px;
