子组件如下
<template>
<li>
<div @click="toggle" :class="liClass">{{model.menuName}}</div>
<transition name="slide">
<ul v-show="open">
<items v-for="(item,index) in model.childTree" :model="item" :key="index"></items>
</ul>
</transition>
</li>
</template>
<script>
export default {
name: "items",
props:['model'],
data() {
return {
open:false
}
},
methods:{
toggle() {
this.open = !this.open
}
},
computed:{
liClass() {
let _this = this;
let option = `level_${this.model.level}`;
let res = {};
res[option] = true;
return res;
}
}
}
</script>
<style scoped lang="scss">
ul {
list-style: none;
text-align: left;
.level_1 {
/*border: 1px #ff0000 solid;*/
}
.level_2 {
/*border: 1px #00ff00 solid;*/
text-indent: 2em;
/*background: #00ff00;*/
}
.level_3 {
/*border: 1px #0000ff solid;*/
text-indent: 4em;
/*background: #0000ff;*/
}
.level_4 {
/*border: 1px #ffff00 solid;*/
text-indent: 6em;
/*background: #ffff00;*/
}
}
.slide-enter-active,.slide-leave-active {
transition: all 0.2s;
}
.slide-enter,.slide-leave-to {
transform: translateY(-20px);
}
.slide-enter-to,.slide-leave {
transform: translateY(0px);
}
</style>
父组件如下
<template>
<div class="home">
<div class="digui">
<ul>
<items v-for="(model,index) in list" :model="model" :key="index"></items>
</ul>
</div>
</div>
</template>
<script>
import items from './items'
export default {
name: "Home",
data() {
return {
list: [
{
"menuName": "项目管理",
"level":1,
"childTree": [{
"menuName": "项目进度",
"level":2,
"childTree": [{
"menuName": "项目一",
"level":3,
"childTree": [{ "menuName": "详细信息","level":4,"childTree":[] }]
}]
}, {
"menuName": "任务安排",
"level":2,
"childTree":[]
}]
},
{
"menuName": "数据统计",
"level":1,
"childTree":[]
},
{
"menuName": "人员管理",
"level":1,
"childTree":[]
}]
}
},
components:{
items
}
}
</script>
<style scoped>
</style>
主要代码如上,用到了组件的递归。