在Vue的全局配置中注册a-menu(Menu)和a-sub-menu(SubMenu)组件,以便在项目的任何位置都可以直接使用它们。这通常在你的主入口文件(如main.js或main.ts)中进行: javascript import Vue from 'vue'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; // 引入样式 Vue.use(Antd...
chineseName: string //菜单显示名称 childMenu?: Menu[] | undefined //子菜单 } defineProps<{ menu: Menu }>() </script> 3 menu 组件 <template> <el-menu :default-active="defaultActive" router> <sub-menu :menu="menu" v-for="menu in menuList" :key="menu.name"></sub-menu> </el-...
菜单栏的渲染我们使用element plus中提供的Menu组件开发,其中el-menu中的el-sub-menu代表目录,el-menu-item则是能点击跳转的菜单。来看一下后端返回的菜单数据结构 image.png 由此可知,如果一条数据有children则说明它是目录,否则则是菜单,这样就好办了,我们可以判断每条数据有没有children有的话渲染el-sub-menu,没...
菜单可能由一级菜单,二级菜单,三级菜单,甚至四级菜单组成,因此推出 Menu.Submenu 子菜单,使用递归生成多级菜单。 Menu.Item 和 Menu.SubMenu 中 key 都是为了作为唯一标志的。 <template functional> <a-sub-menu :key="props.menuInfo.key"> <span slot="title"> <a-icon type="mail" /><span>{{ props...
<el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen" @close="handleClose" > <el-sub-menu index="1"> <template #title> <el-icon><location /></el-icon> <span>Navigator One</span> ...
.sub_menu_container .sub_menu{ position: absolute; top:0; left:100%; width:100%; background-color: darkgray; }</style> 4.reSubMenu.vue 嵌套的多级菜单 引入组件 <template><sub-menu><template#title>{{sub.label}}</template><templatev-for="r in sub.children":key="r.id"><divclass=...
</a-menu-item> </a-sub-menu> 4、效果 写在最后 这部分的代码,是纯前端了, 代码扔太久了,只能看懂,但是自己写还是写不出来,我想这种状态,可能是很多新手,都会面临的问题吧。 有没有好的解决办法呢? 没有,在成功这条路上,永远是没有捷径可言的。
</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,
item.hidden && !item.isFirst":item="item":key="item.path":basePath="item.path"></sub-menu></template></el-menu></el-scrollbar></el-aside><!--主体内容--><el-main><router-view/></el-main></el-container></el-container></div></template><script>import Vue from'vue';...
使用element-plusel-menu组件实现菜单,主要包括三个组件: el-menu:整个菜单; el-sub-menu:含有子菜单的菜单项; el-sub-menu:没有子菜单的菜单项(最末级); 结合菜单的属性和展示效果,可以得到每个菜单项包括:菜单名称、菜单图标、菜单唯一标识、子菜单列表四个属性。于是可得到菜单项结构定义如下: ...