如果菜单项没有子菜单,则使用 el-menu-item 组件进行渲染。 脚本部分: 使用ref 定义响应式数据 menuData,包含菜单项的数据结构。 activeIndex 用于控制默认激活的菜单项索引。 样式部分: 为el-menu 设置了一个固定宽度,以便更好地展示菜单。 通过这种方式,你可以轻松地在 Vue 3 中使用 Element Plus 的 el-menu...
<el-sub-menu v-for="item in menuList" :key="item.menuId" :index="item.menuId.toString()"> <template #title> <span>{{ item.name }}</span> </template> <!-- 此处调用menu-item组件 --> <menu-item :arrList="item.children"></menu-item> </el-sub-menu> </el-menu> </el-col>...
<i class="icon iconfont icon-pointer" style="vertical-align: baseline;"/> {{menu.name}} </el-menu-item> </el-submenu> <el-menu-item v-else :key="group.id" :index="group.url"> <i :class="group.icon"></i> <span slot="title">{{}}</span> </el-menu-item> </template> <...
<el-menu class="menu-main" router :default-active="route.path" unique-opened background-color="#18214C" text-color="#fff"> <menuItem v-for="item in menuList" :item="item" :key="item.path" /> </el-menu> </el-scrollbar> </aside> </template> <script setup> import menuItem fr...
.menu-left:deep(.el-menu-item:hover), .menu-left:deep(.el-menu-item.is-active) { color:#ffffff!important; background-color:#243158; } </style> 2. 子菜单组件(递归主体): LeftSubMenu.vue <template> <templatev-for="item in menuData"> ...
树枝:含有子菜单的菜单,使用 el-sub-menu 实现,不加载组件。 树叶:没有子菜单,使用 el-menu-item 实现,加载组件的菜单。 图标:使用 component 加载图标组件。 然后设置属性即可,这样一个n级菜单就搞定了。 封装一个动态tabs 菜单有了,下一步就是tabs,为了满足不同的需求,这里封装两个组件,一个单tab的,一个...
</el-sub-menu> <el-menu-item index="3">系统情况</el-menu-item> </el-menu> <el-divider> <el-icon><star-filled /></el-icon> </el-divider> </template> 示例2:面包屑 // App.vue <script setup> import { Check, Delete,
el menu path vue3 递归 【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之主页面开发(侧边栏菜单生成、标签栏开发) elementvue3管理后台开发 页面比较简单,主要分为左侧的菜单栏,顶部的导航栏(折叠左侧菜单,切换暗黑模式,员工账号名,退出登录),再下面的标签栏,之后就是主页面显示区域。
下面是el-menu和el-submenu的基本用法示例: <template> <el-menu :default-active="activeIndex" class="menu" mode="horizontal" @select="handleSelect"> <el-submenu index="1"> <template #title>菜单1</template> <el-menu-item index="1-1">子菜单1-1</el-menu-item> <el-menu-item index="...
delete item.children } return item }) } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 计算菜单的最大层级 deep // 获取树的深度 function getTreeDeep(arr: menu[]) { ...