vue遞歸實(shí)現(xiàn)三級(jí)菜單
本文實(shí)例為大家分享了vue遞歸實(shí)現(xiàn)三級(jí)菜單的具體代碼,供大家參考,具體內(nèi)容如下
父組件
<template> <div v-if='showLevelMenu'> <menu-item :menuDate='menuList'></menu-item> </div></template>
子組件
<template> <div> <div class='' v-for='(menu, index) in menuDate' :key='index'> // 每一個(gè)菜單項(xiàng) <div @click='menuSpread(menu)' :class='[{’menu-row-selected’: menu.selected && menu.children.length <= 0}]'><div class='menu-row-left'> <div :class='[{’menu-selected’: menu.selected && menu.children.length <= 0}]'></div> <i :class='[menu.menuIcon, {’color-icon’: showIconColor(menu)}]'></i></div><div class='menu-row-right'> <span :class='[{’font-16’: menu.level === ’0’}]'>{{menu.menuName}}</span> <i v-if='menu.children.length <= 0'></i> <i v-if='menu.children.length>0 && !menu.selected'></i> <i v-if='menu.children.length>0 && menu.selected'></i></div> </div> // 遞歸展示菜單 <menu-item v-show='menu.selected' v-if='menu.children.length>0' :menuDate='menu.children'></menu-item> </div> </div></template><script> export default { props: { menuDate: Array }, name: ’MenuItem’, methods: { menuSpread (menu) {if (menu.menuRouter) this.$router.push(menu.menuRouter);menu.selected = !menu.selected;this.recursion(this.menuDate, menu); }, recursion (all, temp) {all.forEach(item => { if (item.menuName !== temp.menuName) { item.selected = false; this.recursion(item.children, temp); }}); }, showIconColor (menu) {let show = false;if (menu.level === ’0’) { menu.children.forEach(item => { if (item.children.length <= 0 && item.selected) { show = true; } if (item.children.length > 0) { item.children.forEach(item => {if (item.selected) { show = true;} }); } });}return show; } } };</script>
效果圖

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 利用ajax+php實(shí)現(xiàn)商品價(jià)格計(jì)算2. Java實(shí)現(xiàn)UDP通信過(guò)程實(shí)例分析【服務(wù)器端與客戶端】3. JS圖片懶加載庫(kù)VueLazyLoad詳解4. Java PreparedStatement用法詳解5. Python 解決火狐瀏覽器不彈出下載框直接下載的問(wèn)題6. Java利用TCP協(xié)議實(shí)現(xiàn)客戶端與服務(wù)器通信(附通信源碼)7. 使用AJAX(包含正則表達(dá)式)驗(yàn)證用戶登錄的步驟8. Java實(shí)現(xiàn)的迷宮游戲9. HTML <!DOCTYPE> 標(biāo)簽10. Spring如何集成ibatis項(xiàng)目并實(shí)現(xiàn)dao層基類封裝

網(wǎng)公網(wǎng)安備