问题出在el-icon元素在title模板内的使用。解决方法是将el-icon移出#title,但el-sub-menu的情况需保持el-icon在内,否则显示异常。调整后的代码使菜单项在展开和折叠状态下均能正确显示图标。 错误示范: <el-menu-item v-if="hasChild(item) == 0":index="resolvePath(item.path)":key="resolvePath(item....
<el-sub-menu index="/subMenuConfig"> <template #title> 选项设置 </template> <el-menu-item index="/department">部门设置</el-menu-item> <el-menu-item index="/system">系统设置</el-menu-item> <el-menu-item index="/warn">超时设置</el-menu-item> <el-menu-item index="/employee">员...
<template v-for="item in arrList"> <el-menu-item v-if='!item.children' @click="toMenu(item)" :key="'/' + item.url" :index="'/' + item.url"> <span>{{ item.name }}</span> </el-menu-item> <el-sub-menu :index="item.menuId.toString()" v-else> <template #title><span...
Menu为图标名称,可替换,注意是字符串 <el-icon><component:is="Menu"/></el-icon> 在菜单列表中使用,渲染出每个菜单不同的图标 <el-menu:default-active="activeMenu"class="sidebar"><el-sub-menuv-for="(item, index) in menus":index="item.name":key="index"><template#title><el-icon><componen...
所以看到一个icon在外面,应该icon在里面。到这里sub-menu就搞定了 <el-sub-menu class="aside-sub-menu" v-else-if="menu.children && menu.children.length >1" :index="menu.path" > <template #title> <el-icon><component :is="menu.icon"/></el-icon> ...
<el-submenu v-for="submenu in submenus" :key="submenu.id" :index="submenu.id" :title="...
--二级菜单--> <template v-if="!route.isHidden"> <el-sub-menu :index = "route.path"> <template #title> <span>{{route.name}}</span> </template> <template v-for="children of route.children"> <template v-if="!children.isHidden"> <el-menu-item :index = "children.path"> <span...
<template> <div> <template v-for='menu in menuList'> <!-- 如果当前有子菜单,则显示 el-submenu ,在el-subment 里调用 递归组件 --> <el-submenu v-if='menu.children.length>0' :index='menu.name' :key="menu.id" > <template slot="title"...
查看循环菜单的数据menuList,发现只有叶子菜单的数据才配置了url,其它级别的则为空数据,所以就导致了配置:index="menu.url"时出现点击一个全部展开的情况。 第五步、解决方法 第一种,使用第二步的写法,后台数据库的数据url字段不为null且值不相同 第二种,修改代码el-sub-menu中的:index值为menu.index,el-menu...
--递归子菜单--><my-sub-menu2 :subMenu="item.children"/></el-sub-menu></template><!--树叶--><el-menu-item v-else:index="item.menuId"><template #title><component:is=""style="width: 1.5em; height: 1.5em; margin-right: 8px;"></component><span>{{item.text}}</span></template...