下面是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="...
第一步、创建SubMenu <template> <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> </el-s...
4.完整代码如下: const SubMenu = (props) => { const { menu } = props // 定义具名插槽:title const slots = { title: () => { return ( <> 用户管理 </> ) } } return ( <> <el-sub-menu index={menu.id} v-slots={slots}>{/* 传入插槽 */} { menu.children.map(x => { if ...
// el-sub-menu节点 const SubMenu = (props) => { const { menu } = props // 定义具名插槽:title const slots = { title: () => { return ( <> {menu.name} </> ) } } return ( <> <el-sub-menu index={menu.id} v-slots={slots}>{/* 传入插槽 */} { menu.children.map(x =...
.menu-left:deep(.el-menu-item.is-active) { color:#ffffff!important; background-color:#243158; } 2. 子菜单组件(递归主体): LeftSubMenu.vue <template> <templatev-for="item in menuData"> <el-sub-menu :key="item.path" v-if="item...
如何在Vue3的el-menu组件中设置default-active属性的示例代码: vue <template> <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect" > <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <...
全局搜索“ElSubmenu”,替换成“ElSubMenu” 全局搜索“el-submenu”,替换成“el-sub-menu” ⑨ 对话框改动 全局搜索“<el-dialog”, 将它上面的“:visible.sync”改写成“v-model”, 将它上面的“:visible”改写成“:model-value” ⑩ 表单校验的调整(主要针对required) ...
</el-menu> </template> import { computed } from 'vue' import { useRoute } from 'vue-router' import SubMenu from './subMenu.vue' // useRoute().meta?.parentMenu : 自定义路由点亮菜单,在路由的 meta 上配置 parentMenu 字段,值为父级菜单的 name 值 const defaultActive = computed...
Vue3和Element Plus可以配合使用,来创建菜单栏。 在Vue3中,使用Element Plus可以方便地创建公共组件,比如左侧的菜单栏和右侧的头像区域。左侧菜单栏可以通过<el-menu>标签实现,而右侧的头像区域可以通过点击头像进行登出等操作。 在Element Plus中,可以支持二级菜单甚至三级或更多的菜单,通过使用<el-submenu>可以实现...
菜单项:el-menu-item 而菜单目录中可以任意嵌套菜单目录和菜单项,el-submenu也是可以的。 注:vue3中用的是element-plus哦,如果对这个组件不熟悉建议先看一下文档哦,导航组件文档 然后是路由信息 下面是在脚手架生成的 router/index.ts文件中改routes对象而已,其他配置不动。