vue递归实现三级菜单

本文实例为大家分享了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 = 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>

效果图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 vue递归实现三级菜单 的全部内容, 来源链接: utcz.com/p/239210.html

回到顶部