如何用vue-Element-ui实现左侧无限级菜单?本文详细教你

#最近项目中,要用到element-ui的无限级分类菜单,根据角色生成不一样的递归数据,查阅了网上不少资料,发现不少都不太完整而且没有不少的延伸性。

###梳理递归数据前端

咱们通常拿到后台的数据是:1.扁平化数据格式
2.递归式数据格式
复制代码
let arr = [ { name:小七, id:1 }, { name:小八, id:2 }, { name: 小九, id:3 } ] 咱们从后台拿到的是这种扁平化处理数据,那咱们实现递归菜单的话须要什么数据格式呢,须要格式以下: let menuItems = [ { name:小七, id:1, children:[ { name: '啥也不是', pid:2 } ] }, { name:小八, id:2, children:[ { name:'随便写哦', pid:3, children:[ { name: '再次深刻', pid: 4, children:[ { name: '撒打算', pid:666 } ] } ] } ] }, { name: 小九, id:3
我是08年出道的前端老鸟,有问题或者交流经验能够进个人扣扣裙 519293536 我都会尽力帮你们
] 咱们就须要相似于以上的这种数据格式: 扁平化数据转换递归数据,下面贴出个人数据处理方法: 注:应为在网上看到的许多的递归处理方法都不同,有的文章写于很早不少方法都比较复杂或者代码比较多余 复制代码
computed: {
    treeData() { let cloneData = JSON.parse(JSON.stringify(this.tableData)); // 对源数据深度克隆 return cloneData.filter(father => { let branchArr = cloneData.filter(child => father.id == child.pid); //返回每一项的子级数组 branchArr.length > 0 ? (father.children = branchArr) : ""; //若是存在子级,则给父级添加一个children属性,并赋值 return father.pid == 0; //返回第一层 }); } }, 其中this.tableData就是后台给到个人扁平化数据,这里将其替换就能够 当时处理此功能时没有考虑到子级或者父级有可能值位udfriend 因此没有作判断,若是想完善此递归数据处理的能够完善一下。 复制代码

###数据处理就要开始写代码了!vue

这里用到了vue-ement-ui的左侧菜单

老规矩,程序员交流用代码
复制代码

##index.vue程序员

<el-menu
        background-color="#304156" text-color="#fff" active-text-color="#409eff" :collapse="isActive" :collapse-transition="false" :unique-opened="true" :router="true" :default-active="activePath" > <menu-tree :menuData="treeData" @saveNavStart="saveNavStart"></menu-tree> </el-menu> 这里的激活样式用的是缓存的办法 // 保存连接的激活状态 saveNavStart(activePath) { window.sessionStorage.setItem("activePath", activePath); this.activePath = activePath; }, created() { this.activePath = window.sessionStorage.getItem("activePath"); } 复制代码

menuTree.vue组件

实现左侧无限级菜单最重要的就是 组件自身调用自身
废话很少说,上代码:


<template>
  <div>
    <label v-for="menu in menuData" :key="menu.id"> <el-submenu :index="String(menu.id)" v-if="menu.children"> <template slot="title"> <i class="el-icon-edit"></i> <span>{{menu.menu_name}}</span> </template> <label> <menutree :menuData="menu.children"></menutree> </label> </el-submenu> <el-menu-item :index="menu.path" @click="saveNavStart(menu.path)" v-else> <i class="el-icon-edit"></i> <span>{{menu.menu_name}}</span> </el-menu-item> </label> </div> </template> methods:{ saveNavStart(activePath) { this.$emit('saveNavStart',activePath) }我是08年出道的前端老鸟,有问题或者交流经验能够进个人扣扣裙 519293536 我都会尽力帮你们 } } 复制代码

###到此就实现了左侧菜单的无限级了,应为如今给公司写的项目都是权限功能,路由方面呢你们能够随便写,公司项目作了权限:左侧菜单,按钮限制,菜单限制,接口限制目前是四种。element-ui

本文的文字及图片来源于网络加上本身的想法,仅供学习、交流使用,不具备任何商业用途,版权归原做者全部,若有问题请及时联系咱们以做处理数组

相关文章
相关标签/搜索