• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue递归实现三级菜单

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

效果图

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue项目中使用骨架屏的方法发布时间:2022-02-05
下一篇:
vue函数防抖与节流的正确使用方法发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap