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>

效果图

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