树形菜单导航Vue和Element实现

分手后的思念是犯贱 2023-06-20 06:01 18阅读 0赞

最近做项目时遇到一小难点，动态渲染element-ui 的侧边栏 导航菜单，有三级路由，有二级的，渲染完事了发现二级的跳转不了路由，这可着急坏了，出了一身汗。。。。  
![在这里插入图片描述][20191207193557309.png]  
二级里面的订单列表不能跳转路由，三级里面才可以跳转，而且还有个小箭头，经过几个小时的研究 最终搞定，  
![在这里插入图片描述][20191207193725312.png]  
最终是利用vue name属性，然后实现递归  
编写一个自定义zMenu.vue组件，其中实现递归逻辑

<template>
    <fragment>
        <template v-for="menu in menus" >
          <el-submenu v-if="menu.children && menu.children.length >= 1" :index="menu.path + ''" :key="menu.menuId" >
            <template slot="title">
              <i :class="menu.icon"></i>
              <span slot="title">{ { menu.name}}</span>
            </template>
            
            <z-menu :menus="menu.children"></z-menu>
          </el-submenu>
          <el-menu-item v-else :index="menu.path + ''" @click="handleRouter(menu)" :key="menu.path">
            <i :class="menu.icon"></i>
            <span slot="title">{ { menu.name}}</span>
          </el-menu-item>
        </template>
      </fragment>
    </template>
    <script>
    export default { 
      name:'zMenu', //至关重要 ，完全是靠它实现递归
       props: { 
        menus: { 
          type: Array,
          default: function () { 
            return [];
          },
         
        }
      },
      mounted(){ 
      this._accessType()
      
      },
       methods: { 
        handleRouter(menu) { 
          // 跳转路由
          this.$router.push(menu.path);
        }
      }
    }
    </script>
    <style scoped lang="scss">
      
      .Menu{ 
           height: 100%;
         display: flex;
         
        .el-menu-vertical-demo { 
          width: 200px;
           height: 100%;
           color: #fff;
           background: #333744;
           span{ 
             color: #fff;
               font-size: 14PX;
           }
        }
        li{ 
          color: #fff;
        }
      }
      .el-menu-item{ 
        color: #FFF
      }
      
      
    </style>

引入组件中：

<template>
      <div class="Menu">
    <el-menu default-active class="el-menu-vertical-demo" router background-color="#333744" :collapse="this.$store.state.isCollapse" :class="!this.$store.state.isCollapse?'cur':''"> 
      <zMenu :menus="readAccessType"></zMenu>
      //readAccessType 这个是传入的菜单数据
    </el-menu>
    <Button></Button>
    <router-view></router-view>
    </div>
    </template>

至此，初步实现了功能，但是当折叠时我们发现文字并没有隐藏  
出现这个问题是因为我们在嵌套中出现了意料之外的

,而标签本身希望里面嵌套的是,,其中之一  
但是我们又不能直接删掉

,因为中包含的必须是一个根标签，而v-for会形成不确定的并列标签  
于是我们找到了vue-fragment这个库  
**项目安装vue-fragment**

npm install --save vue-fragment

min.js引入

// main.js
    import Fragment from 'vue-fragment'
    Vue.use(Fragment.Plugin)

好了本篇文章就到这里

[20191207193557309.png]: https://img-blog.csdnimg.cn/20191207193557309.png
[20191207193725312.png]: https://img-blog.csdnimg.cn/20191207193725312.png