vue递归实现三级菜单

本文实例为大家分享了vue递归实现三级菜单的具体代码，供大家参考，具体内容如下

父组件

<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'> // 每一个菜单项 <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>

效果图

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