您的位置:首页 > 编程学习 > > 正文

vue实现树形结构菜单(vue递归实现三级菜单)

更多 时间:2022-03-28 01:55:52 类别:编程学习 浏览量:2518

vue实现树形结构菜单

vue递归实现三级菜单

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

父组件

  • <template>
        <li class="menu-level-menu menu-level-menu-enter"  v-if="showLevelMenu">
          <menu-item class="menu-item" :menuDate="menuList"></menu-item>
        </li>
    </template>
    
  • 子组件

  • <template>
      <li>
        <li class="" v-for="(menu, index) in menuDate" :key="index">
        // 每一个菜单项
          <li class="menu-row" @click="menuSpread(menu)"
               :class="[{'menu-row-selected': menu.selected && menu.children.length <= 0}]">
            <li class="menu-row-left">
              <li class="menu-row-left-line" :class="[{'menu-selected': menu.selected && menu.children.length <= 0}]"></li>
              <i class="iconfont" :class="[menu.menuIcon, {'color-icon': showIconColor(menu)}]"></i>
            </li>
            <li 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>
            </li>
          </li>
          // 递归展示菜单
          <menu-item v-show="menu.selected" v-if="menu.children.length>0" :menuDate="menu.children"></menu-item>
        </li>
      </li>
    </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实现树形结构菜单(vue递归实现三级菜单)

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

    您可能感兴趣