如何用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 我都会尽力帮大家
] 我们就需要类似于以上的这种数据格式: 扁平化数据转换递归数据,下面贴出我的数据处理方法: 注:应为在网上看到的许多的买QQ地图递归处理方法都不一样,有的文章写于很早很多方法都比较复杂或者代码比较多余 复制代码
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-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 我都会尽力帮大家
}
}复制代码
###到此就实现了左侧菜单的无限级了,应为现在给公司写的项目都是权限功能,路由方面呢大家可以随便写,公司项目做了权限:左侧菜单,按钮限制,菜单限制,接口限制目前是四种。
更多相关文章
- 如何实现vue3.0的响应式呢?本文实战教你
- Java杂谈之重复代码是什么
- php操作redis命令及代码实例大全
- 华纳负责人yy988680
- 自定义一个kaniko镜像
- java web将数据导出为pdf格式文件代码
- php在线生成ico文件的代码
- PHP生成RSS文件类实例
- php判断数组元素不为空格实例代码