第一步、创建SubMenu <template><div> <template v-for="menu in this.menuData" :key="menu.url"> <el-sub-menu v-if="menu.children" :index="menu.url" :key="menu.url" > <template #title> <el-icon><component :is="menu.icon"></component></el-icon>{{menu.name}} </template> <su...
<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...
import menuItem from "./components/menuItem.vue" import { useRoute } from "vue-router" const route = useRoute() const menuList = [ { path: "/index", component: () => import("@/views/index.vue"), name: "index", meta: { title: "一级菜单" } }, { path: "/level", name: ...
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-menu-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> ...
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...
<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'" > <template#title> <img class="icon pd-r-10" ...
el-menu-item el-sub-menu Reproduction Link Element Plus Playground Steps to reproduce -- 创建任意一个 el-menu -- :router="true" -- mode="horizental" -- menuList 必须最少包含一个没有children的路由和一个有children的路由 -- for循环创建 menu 列表 ...
.el-menu-item.is-active { background-color: rgb(56,96,226) !important; color: white; } 点击有子元素的菜单时不会变色,下面可以实现: (点击有子元素菜单时,会有一个class属性is-opened,所以给其编辑样式即可) .is-opened >.el-sub-menu__title span{/*background-color: rgb(56, 96, 226) !
Bug Type: Component Environment Vue Version: 3.2.47 Element Plus Version: 2.3.0 Browser / OS: Chrome 110.0.5481.177 / Mac OS 13.2 Build Tool: Vite Reproduction Related Component el-menu el-sub-menu Reproduction Link Docs CN Steps to repr...