5、active-text-color为选中的菜单的颜色 <el-menu>标签中可以有el-submenu和el-menu-item标签组成 demo <el-menu :router="true" mode="horizontal" background-color="#1c213f" text-color="#fff"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-menu"></i> </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{ height: 645px }</style><script>export default { name: 'LeftMenu', };</script> 四、在index.j...
仅⽀持 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⼦菜单...
1. 上递归组件(此组件自己调用了自己) <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....
查看循环菜单的数据menuList,发现只有叶子菜单的数据才配置了url,其它级别的则为空数据,所以就导致了配置:index="menu.url"时出现点击一个全部展开的情况。 第五步、解决方法 第一种,使用第二步的写法,后台数据库的数据url字段不为null且值不相同 第二种,修改代码el-sub-menu中的:index值为menu.index,el-menu...
<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> ...
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...
</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"), ...
item.meta.hidden"><el-sub-menu:index="item.path":key="item.path"v-if="item?.children?.length > 0"><template #title><el-icon><Aim/></el-icon><span>{{item.meta.title}}</span></template><menuItem v-for="child in item.children":item="child":key="child.path"/></el-sub-...
<el-sub-menu :key="item.path" v-if="item.children && item.children.length > 0" :index="item.path" :class="item.icon ? '' : 'noIcon'" > <template#title> <img class="icon pd-r-10" :src="curRoute.indexOf(item.path) != -1 ? item.iconActive : item.icon" ...