<template>
<div id="main">
<ul>
<li v-for="(item,index) in data" :key="index">
{{ item.label }}
<LoopTree v-if="item.children&&item.children.length" :data="item.children">
</LoopTree>
</li>
</ul>
</div>
</template>
<script>
export default {
name:'LoopTree',
props:{
data:{
type:Array,
default:()=>{
return [
{
label:'AAA',
children:[
{
label:'aaa',
children:[
{
label:'111',
children:[]
},
{
label:'222',
children:[]
},
{
label:'333',
children:[]
},
]
},
{
label:'bbb',
children:[]
},
{
label:'ccc',
children:[]
},
]
},
{
label:'BBB',
children:[
{
label:'aaa',
children:[]
},
{
label:'bbb',
children:[]
},
{
label:'ccc',
children:[]
},
]
},
{
label:'CCC',
children:[]
},
]
}
}
},
data(){
return{
list:{}
}
},
mounted(){
// console.log(this.data);
}
}
</script>
组件自调用渲染树状结构
最新推荐文章于 2024-07-24 10:40:52 发布