? <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進(jìn)行遞歸調(diào)用 -->
? ? ? ? <detail-list v-on="$listeners"
? ? ? ? ? v-if="scopesDefault[index]"
? ? ? ? ? :list="item.children"
? ? ? ? >
export default {
name:"DetailList",
? props: {
list:Array,
? },
? data() {
return {
isActive:[],
? ? ? scopesDefault: [], // 第一級(jí)
? ? ? scopes: [], // 第二級(jí)
? ? };
? },
? 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)
//數(shù)據(jù)內(nèi)容
? ? ? ? ? // 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; // 第一級(jí)索引值全都是false
? ? ? ? if ("children" in item) {// 判斷第一級(jí)是否有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>
