vue遞迴實現三級選單
阿新 • • 發佈:2021-05-21
本文例項為大家分享了vue遞迴實現三級選單的具體程式碼,供大家參考,具體內容如下
父元件
<template> <div class="menu-level-menu menu-level-menu-enter" v-if="showLevelMenu"> <menu-item class="menu-item" :menuDate="menuList"></menu-item> </div> </template>
子元件
<template> <div> <div class="" v-for="(menu,index) in menuDate" :key="index"> // 每一個選單項 <div class="menu-row" @click="menuSpread(menu)" :class="[{'menu-row-selected': menu.selected && menu.children.length <= 0}]"> <div class="menu-row-left"> <div class="menu-row-left-line" :class="[{'menu-selected': menu.selected && menu.children.length <= 0}]"></div> <i class="iconfont" :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 class="c" v-if="menu.children.length <= 0"></i> <i class="iconfont icon-liebiaoxiala" v-if="menu.children.length>0 && !menu.selected"></i> <i class="iconfont icon-liebiaoshouqi" 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 = fal程式設計客棧se; 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; } } }; </scri程式設計客棧pt>
效果圖
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。