vue项目-element UI-NavMenu 导航菜单始终只展开一个

全局搜索:unique-opened找到该配置将其改成true
unique-opened：是否只保持一个子菜单的展开

<template><div class="container"><el-menudefault-active="2"class="el-menu-vertical-demo":unique-opened="true"   @open="handleOpen"@close="handleClose"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-location"></i><span>导航二</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-location"></i><span>导航三</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-submenu index="4"><template slot="title"><i class="el-icon-location"></i><span>导航四</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu></el-menu></div>
</template>
<script>
export default {methods: {handleOpen(key, keyPath) {console.log(key, keyPath)},handleClose(key, keyPath) {console.log(key, keyPath)},},
}
</script>
<style scoped lang="less">
</style>

效果

vue项目-element UI-NavMenu 导航菜单始终只展开一个相关推荐

element UI NavMenu 导航菜单样式修改
.el-menu { background-color: rgba(165, 42, 42, 0); } .el-menu.el-menu--horizontal { border: none; } ...
vue+elementUI项目中使用NavMenu导航菜单
vue+elementUI项目中使用NavMenu 导航菜单在elementUI官网组件中NavMenu 导航菜单的使用只是简单地运用,在实践项目中还需要配合路由配置.一般后台管理系统不只是导航菜单 ...
修改element ui的导航菜单样式，包括下拉菜单
第一次使用element ui,根据项目需求,选择了NavMenu导航菜单, Element - The world's most popular Vue UI framework 首先将代码复制粘贴 ...
Vue 结合Element UI 实现导航的 router 属性 expected boolean,got string
转自:https://blog.csdn.net/lindonglian/article/details/77532941 为了能通过el-menu-item的index实现动态路由跳转,得将el-m ...
element-ui NavMenu 导航菜单通过一个按钮控制
element -ui 里导航菜单是通过两个按钮控制的,但实际开发中很多情况是通过一个按钮来toggle,而且有一个坑就是elemnt ui NavMenu的el-radio-butto 不是clic ...
Element UI样式修改之NavMenu导航菜单
目录 Element UI样式修改之NavMenu导航菜单一.成果展示二.步骤三.完整代码 Element UI样式修改之NavMenu导航菜单一.成果展示 Element UI官网给出的例子 ...
Vue+JS+Element UI实战（电商项目1)
目录 1.电商业务概述 2.电商后台管理系统的功能 3.项目初始化步骤 4.后台项目的环境安装配置 4.1. API V1 接口说明 4.2. 支持的请求方法 4.3. 通用返回状态说明 5.测试后 ...
element菜单组件样式修改NavMenu导航菜单
NavMenu导航菜单 1.选中菜单的颜色 .el-menu-item.is-active {background-color: #41a3fb !important; } 2.菜单hover颜色 . ...
【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...

vue项目-element UI-NavMenu 导航菜单始终只展开一个

vue项目-element UI-NavMenu 导航菜单始终只展开一个

vue项目-element UI-NavMenu 导航菜单始终只展开一个相关推荐

最新文章

热门文章