element多级菜单动态显示的实现
更新时间:2023年11月07日 15:37:17 作者:_Jyann_
通常在后台管理系统中,需要根据每个用户不同的权限来动态展示菜单,本文主要介绍了element多级菜单动态显示的实现,具有一定的参考价值,感兴趣的可以了解一下
背景:根据后端返回数据生成多级菜单,菜单项可能会有很深的层级,如果直接使用elementUI 去编写会写很深的层级,代码繁杂,一旦后面菜单项有改动又不利于维护
如何做到多级菜单?使用递归组件
elmentUI原本写法:
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>导航一</span> </template> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> </el-menu>
使用递归组件写法:
主要思路:
- 通过数据查找hasOneChild()判断是否有children,有证明有子菜单,有子菜单使用el-submenu封装的组件
- SidebarItem.vue组件内部调用自己的组件;
- 渲染元素组件Item.vue使用函数式组件写法;
<template v-if="hasOneChild(item.children, item) && (!oneChild.children || oneChild.noShowChild)"> <app-link v-if="item.redirect != 'noRedirect' && item.meta" :to="resolvePath(item.path)"> <el-menu-item :index="resolvePath(item.path)" class="submenu-title-noDropdown"> <Item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title"></Item> </el-menu-item> </app-link> </template> <!-- 有子菜单:有多个children --> <el-submenu v-else :index="resolvePath(item.path)"> <template slot="title" v-if="item.meta"> <!-- 没有组件数据要处理可以使用函数式组件进行渲染 --> <Item :icon="item.meta.icon" :title="item.meta.title"></Item> </template> <!-- el-submenu里面还有多级菜单 --> <sidebar-item v-for="child in item.children" :key="child.path" :item="child" :base-path="resolvePath(child.path)" class="nest-menu" ></sidebar-item> </el-submenu>
// 判断当前菜单是否有子菜单 hasOneChild(children = [], item) { // 判断如果菜单是隐藏直接不显示 // if(item.hidden) return false; if (children.length === 0) return false; const showChildArr = children.filter(child => { console.log(child); if (child.hidden) return false; else return true; }); // 没有找到child说明没有子菜单 if (showChildArr.length === 0) { this.oneChild = { ...item, path: item.path, noShowChild: true }; return true; } console.log(this.oneChild, "this.oneChild"); return false; },
函数式组件Item.vue写法:
- functional:true定义组件为函数式组件;
- props接收父级传入属性;
- render函数生成虚拟节点;
<script> export default { name: "Item", functional: true, // 组件传入的数据 props: { title: { type: String, default: "" }, icon: { type: String, default: "" } }, // render函数生成虚拟节点 render(h, context) { // <i class="iconfont el-icon-location"></i> // <span>{{item.meta.title}}</span> const { title, icon } = context.props; //获取传入的属性 const vNode = []; if (icon) { const iconClass = `iconfont ` + icon; vNode.push(<i class={iconClass} style="font-size:18px;"></i>); } if (title) { // JSX语法 vNode.push(<span style="margin-left:8px;">{title}</span>); } return vNode; } }; </script>
到此这篇关于elment多级菜单动态显示的实现的文章就介绍到这了,更多相关elment多级菜单动态显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
相关文章
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
这篇文章主要介绍了详解vue-cli 3.0 build包太大导致首屏过长的解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-11-11详解vue3+element-plus实现动态菜单和动态路由动态按钮(前后端分离)
本文需要使用axios,路由,pinia,安装element-plus,并且本文vue3是基于js而非ts的,这些环境如何搭建不做描述,需要读者自己完成,感兴趣的朋友跟随小编一起看看吧2023-11-11Vue实现contenteditable元素双向绑定的方法详解
contenteditable是所有HTML元素都有的枚举属性,表示元素是否可以被用户编辑。本文将详细介绍如何实现contenteditable元素的双向绑定,需要的可以参考一下2022-05-05Vue2中compiler和runtime模式报错template compiler is 
本文主要介绍了Vue2中compiler和runtime模式报错template compiler is not available,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-07-07
最新评论