vue---tree实现递归组件(多级下拉菜单)
<div class="detail-list">
<div class="item" v-for="(item, index)in list" :key="index">
<div class="item-title border-bottom" @click.stop="changeStatus(index)" :class="{'active':isActive[index]}">
<span class="oks">{{ item.title }}
<!-- 注意递归终止条件 -->
<div v-if="item.children" class="item-children">
<!-- 通过name进行递归调用 -->
<detail-list v-on="$listeners"
v-if="scopesDefault[index]"
:list="item.children"
>
export default {
name:"DetailList",
props: {
list:Array,
},
data() {
return {
isActive:[],
scopesDefault: [], // 第一级
scopes: [], // 第二级
};
},
created() {
this.scope();
},
mounted(){
},
methods: {
changeStatus(index) {
var ods=[]
for(var b=0;b
ods.push(false)
}
this.scopesDefault=ods;
this.isActive=ods;
if (this.scopesDefault[index] ==true) {
this.$set(this.scopesDefault, index, false);
}else {
this.$set(this.scopesDefault, index, this.scopes[index]);
if(this.list[index].children==undefined){
this.$emit("Eok",true)
//数据内容
// var value = [{
// title: "文华酒店自助晚餐",
// }]
//
// this.list[index]['children']=value
this.$set(this.isActive, index, true);
}else{
this.$set(this.isActive, index, this.scopes[index]);
}
}
// this.list.push({
// title: "特惠1票",
// })
},
scope() {
this.list.forEach((item, index) => {
this.scopes[index]=false
this.isActive[index]=false
this.scopesDefault[index] =false; // 第一级索引值全都是false
if ("children" in item) {// 判断第一级是否有children
this.scopes[index] =true;
}else {
this.scopes[index] =false;
}
});
},
},
};
<style scoped>
.item-title {
line-height:40px;
padding:0 10px;
display:flex;
color:#666;
}
.item-title span {
cursor:pointer;
display:block;
margin:0 auto;
}
.item-title.active span{
border-bottom:2px solid #03a9f4;
color:#03a9f4;
}
.item-children {
padding:0 20px;
position:absolute;
width:100%;
left:0;
}
.item-title.active{
}
.detail-list{
width:100%;
display:flex;
border-bottom:1px solid #ddd;
position:relative;
}
.detail-list>div{
flex:1;
}
.item{
flex:1;
}
</style>
