ElementUI的NavMenu 导航菜单水平展开左侧菜单时 默认打开子菜单（open方法：手动打

文章目录

情景

ElementUI的NavMenu 导航菜单model为vertical（默认）时，可以通过控制collaspe来控制菜单的水平折叠与展开，但是开启折叠的时候子菜单是关闭状态，现在是希望水平展开菜单的同时，子菜单也是展开状态

知识点

html

<el-menuref="menu"router:class="minBoxRight ? 'left-menu' : 'el-menu-vertical-demo'":collapse="minBoxRight":default-active="path":default-openeds="openMenuArr"active-text-color="#ffffff"background-color="#218eff"text-color="#ffffff"><el-menu-item v-if="hasPerm('p200')" index="/index/workbench"><i class="iconfont">&#xe65b;</i><span style="color:#ffffff;margin-left:18px;" slot="title">首页地图</span></el-menu-item><el-submenuindex="1":class="isHead == '1' ? 'oneTitle' : 'noTitle'"v-if="hasPerm('p010')"><template slot="title"><i class="iconfont">&#xe66f;</i><span style="margin-left:18px;">工作台</span></template><el-menu-item-group v-if="hasPerm('p010_1')"><el-menu-item index="/index/company_warn"><template slot="title"><span>企业违法预警</span></template></el-menu-item></el-menu-item-group><el-menu-item-group v-if="hasPerm('p010_2')"><el-menu-item index="/index/nongwu_warn"><template slot="title"><span>农污异常预警</span></template></el-menu-item></el-menu-item-group></el-submenu><el-submenuindex="2":class="isHead == '2' ? 'oneTitle' : 'noTitle'"v-if="hasPerm('p400')"><template slot="title"><i class="iconfont">&#xe71d;</i><span style="margin-left:18px;">排放列表</span></template><el-menu-item-groupv-if="hasPerm('p400_1')"><el-menu-item index="/index/discharge"><template slot="title"><span>污染物排放量</span></template></el-menu-item></el-menu-item-group><el-menu-item-groupv-if="hasPerm('p400_2')"><el-menu-item index="/index/concentration"><template slot="title"><span>污染物浓度</span></template></el-menu-item></el-menu-item-group></el-submenu></el-menu>

js

data() {return {path: this.$route.path,openMenuArr: ['1', '2', '3'],//submenu的index列表 };},computed: {minBoxRight() {return this.$store.state.minBoxRight;}},watch: {minBoxRight(collapse) {if(!collapse){this.openMenuArr.forEach((index,item) => {this.$refs.menu.open(index)//遍历openMenuArr，打开submennu菜单});}}}

效果

ElementUI的NavMenu 导航菜单水平展开左侧菜单时 默认打开子菜单（open方法：手动打开子菜单）