原理:其实就是利用<el-tree>插件与<Input>插件模拟一个树形结构的下拉框 重点在样式代码
代码:
<template>
<label class="select-tree" @click="showTree = true">
<el-input v-model="inputVal" placeholder="请下拉选择树形结构数据"/>
<el-collapse-transition>
<div class="tree-modal" v-show="showTree" @mouseleave="showTree = false">
<el-tree :data="filterList" ref="selectTreeData" node-key="id" show-checkbox/>
<div class="popper-arrow" style="left: 35px;"></div>
</div>
</el-collapse-transition>
</label>
</template>
<script>
export default {
name: "test",
data() {
return {
inputVal:"",
showTree:false,
filterList: [{
id: 1,
label: 一级 1,
children: [{
id: 4,
label: 二级 1-1,
children: [{
id: 9,
label: 三级 1-1-1
}, {
id: 10,
label: 三级 1-1-2
}]
}]
}, {
id: 2,
label: 一级 2,
children: [{
id: 5,
label: 二级 2-1
}, {
id: 6,
label: 二级 2-2
}]
}, {
id: 3,
label: 一级 3,
children: [{
id: 7,
label: 二级 3-1
}, {
id: 8,
label: 二级 3-2
}]
}],
defaultProps: {
children: children,
label: label
}
};
}
}
</script>
<style lang="less">
.select-tree {
flex: 1;
margin-right: 10px;
max-width: 300px;
height: 30px;
background: #FFFFFF;
line-height: 30px;
.el-input__inner{
height: 30px;
border-radius: 1px;
line-height: 30px;
}
.tree-modal{
position: absolute;
max-width: 300px;
overflow:auto;
z-index: 888;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
margin-top: 10px;
.el-tree {
width: auto;
max-height: 300px;
z-index: 999;
padding-right: 10px;
padding-bottom: 10px;
overflow: auto;
min-width: 200px;
max-width: inherit;
margin-top: 5px;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: rgba(87, 163, 243, 0.8);
color: #FFFFFF;
}
.popper-arrow {
top: 28px;
margin-right: 3px;
border-top-width: 0;
position: absolute;
border-width: 6px;
border-color: #FFFFFF;
animation: mymove 2s;
opacity: 1
}
@keyframes mymove {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
.popper-arrow::after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
top: 1px;
margin-left: -6px;
border-top-width: 0;
border-bottom-color: #FFFFFF;
border-width: 6px;
}
}
}
</style>