树形菜单导航Vue和Element实现

最新推荐文章于 2024-06-09 10:04:21 发布

m0_45043105

最新推荐文章于 2024-06-09 10:04:21 发布

阅读量1k

点赞数 1

文章标签： element-ui 树形菜单动态渲染数据

本文链接：https://blog.youkuaiyun.com/m0_45043105/article/details/103438735

版权

最近做项目时遇到一小难点，动态渲染element-ui 的侧边栏导航菜单，有三级路由，有二级的，渲染完事了发现二级的跳转不了路由，这可着急坏了，出了一身汗。。。。
在这里插入图片描述
二级里面的订单列表不能跳转路由，三级里面才可以跳转，而且还有个小箭头，经过几个小时的研究最终搞定，

最终是利用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)

好了本篇文章就到这里