<template slot="title">选项二</template> <el-menu-item index="2-1">选项二-一</el-menu-item> </el-submenu> </el-menu>
-- 如果当前有子菜单,则显示 el-submenu ,在el-subment 里调用 递归组件 --> <el-submenu v-if='menu.children.length>0' :index='menu.name' :key="menu.id" > <template slot="title" > <i :class="menu.icon"></i> pw_menu.name </template>...
仅⽀持 hex 格式）string—#303133 active-text-color当前激活菜单的⽂字颜⾊（仅⽀持 hex 格式）string—#409EFF default-active当前激活菜单的 index string——default-openeds当前打开的 sub-menu 的 index 的数组Array——unique-opened是否只保持⼀个⼦菜单的展开boolean—false menu-trigger⼦菜单...
<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">员工设置</el-menu-item> </el-sub-menu> <el-menu-item index="/statistics"> <...
查看循环菜单的数据menuList,发现只有叶子菜单的数据才配置了url,其它级别的则为空数据,所以就导致了配置:index="menu.url"时出现点击一个全部展开的情况。 第五步、解决方法 第一种,使用第二步的写法,后台数据库的数据url字段不为null且值不相同 第二种,修改代码el-sub-menu中的:index值为menu.index,el-menu...
<el-submenu index="1-4"> <template slot="title">测试5</template> <el-menu-item index="1-4-1">选项4-1</el-menu-item> </el-submenu> --></el-menu-item-group></el-submeu></el-menu></el-col></el-row></template><style>.el-menu-vertical-demo{ ...
el-menu用法el-menu的用法如下: el-menu-item是组件元素。 el-menu-item可直接在el-menu中使用。 el-menu-item也可插入元素。 el-menu-item-group是组件组,可包含el-menu-item以及模板插槽。 此外,el-menu还有以下属性: index:唯一标志。 popper-class:为popper添加类名。 show-timeout:展开sub-menu的延时...
menuItem组件代码: <scriptsetuplang="ts">const props = defineProps(['menu']) const menu = computed(() => { return props.menu; })</script><template><el-sub-menuv-if="menu.children":index="menu.fullPath"><template#title><el-icon><componentv-if="menu.icon":is="menu.icon"></compo...
2. 子菜单组件(递归主体): LeftSubMenu.vue <template> <templatev-for="item in menuData"> <el-sub-menu :key="item.path" v-if="item.children && item.children.length > 0" :index="item.path" :class="item.icon ? '' : 'noIcon'" ...
</el-menu> </el-scrollbar> </aside> </template> <script setup> import menuItem from "./components/menuItem.vue" import { useRoute } from "vue-router" const route = useRoute() const menuList = [ { path: "/index", component: () => import("@/views/index.vue"), ...