寫在前面
有時(shí)候我們需要樹狀菜單，比如通訊錄的分組列表倦西。在這時(shí)候數(shù)據(jù)是樹狀存儲(chǔ)的能真，給前端的數(shù)據(jù)需要進(jìn)行遞歸讀取。這時(shí)候我們可以使用遞歸組件來(lái)進(jìn)行渲染扰柠。
父組件引入代碼
<tree-menu :treelist="list"></tree-menu>
遞歸組件
<template>
<ul class="tree-menu">
<li class="tree-li" v-for="(item, index) in treelist" :key="index">
<div class="my-border border-bottom">
<i class="tree-icon"></i>
<div class="tree-content">{{item.title}}</div>
</div>
<treemenu class="children" :treelist="item.children"
v-show="treelist[index].children">
</treemenu>
</li>
</ul>
</template>
<script>
export default {
name: 'treemenu',
data () {
return {
};
},
props: ['treelist'],
};
</script>
模擬數(shù)據(jù)
{
"ret": true,
"data": {
"list": [{
"title": "成人票",
"children": [{
"title": "成人1館聯(lián)票",
"children": [{
"title": "成人1館聯(lián)票 - 某一連鎖店銷售"
}]
},{
"title": "成人2館聯(lián)票"
},{
"title": "成人3館聯(lián)票",
"children": [{
"title": "成人3館聯(lián)票 - 某一連鎖店銷售"
}]
},{
"title": "成人4館聯(lián)票"
}, {
"title": "成人5館聯(lián)票",
"children": [{
"title": "成人5館聯(lián)票 - 某一連鎖店銷售"
}]
},{
"title": "成人6館聯(lián)票"
}]
}, {
"title": "學(xué)生票"
}, {
"title": "兒童票"
}, {
"title": "特惠票"
}]
}
}
