Vue 三层菜单栏中，菜单的展开和收起问题的解决办法

「爱情、让人受尽委屈。」 2022-04-24 00:16 1021阅读 0赞

![在这里插入图片描述][20190410005347502.png]  
例如我们有这样一列菜单

<el-menu>
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-date"></i>一级菜单1</template>
    
              <el-submenu index="1-1" >
                <template slot="title">二级菜单1</template>
                
                <el-menu-item index="1-1-1" >三级菜单1</el-menu-item>
                <el-menu-item index="1-1-2" >三级菜单2</el-menu-item>
                <el-menu-item index="1-1-3">三级菜单3</el-menu-item>
                <el-menu-item index="1-1-4">三级菜单4</el-menu-item>
              </el-submenu>
    
              <el-submenu index="1-2">
                <template slot="title">二级菜单2</template>
                <el-menu-item index="1-2-1">三级菜单1</el-menu-item>
                <el-menu-item index="1-2-2">三级菜单2</el-menu-item>
              </el-submenu>
    
              <el-submenu index="1-3">
                <template slot="title">二级菜单3</template>
                <el-menu-item index="1-3-1">三级菜单11</el-menu-item>
              </el-submenu>
            </el-submenu>
    
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-menu"></i>一级菜单2</template>
           </el-submenu>
      </el-menu>

如果我们要默认展开1级菜单，变成这个样子  
![在这里插入图片描述][20190410005620942.png]  
我们可以在el-menu内设置

:default-openeds=['1','2']

即将index=1和2的菜单默认展开，不过这样继续往下会有一些坑：  
如果我们给el-menu加上select三级菜单切换组件的操作，组件切换生效时，二级菜单会默认收起。要解决这个问题，我们需要将default-openeds的值设为变量。然后通过open的动作动态去修改default-openeds的值，例如下:

<el-menu  :default-openeds="default_openeds_array" @select="handleSelect" @open="handleOpen">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-date"></i>一级菜单1</template>
    
              <el-submenu index="1-1" >
                <template slot="title">二级菜单1</template>
                
                <el-menu-item index="1-1-1" >三级菜单1</el-menu-item>
                <el-menu-item index="1-1-2" >三级菜单2</el-menu-item>
                <el-menu-item index="1-1-3">三级菜单3</el-menu-item>
                <el-menu-item index="1-1-4">三级菜单4</el-menu-item>
              </el-submenu>
    
              <el-submenu index="1-2">
                <template slot="title">二级菜单2</template>
                <el-menu-item index="1-2-1">三级菜单1</el-menu-item>
                <el-menu-item index="1-2-2">三级菜单2</el-menu-item>
              </el-submenu>
    
              <el-submenu index="1-3">
                <template slot="title">二级菜单3</template>
                <el-menu-item index="1-3-1">三级菜单11</el-menu-item>
              </el-submenu>
            </el-submenu>
    
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-menu"></i>一级菜单2</template>
           </el-submenu>
      </el-menu>

methods:{ 
            handleSelect(key, keyPath){ 
              console.log(key, keyPath);
              if (key == '1-1-1'){ 
                this.currentView = 'componnts'
              } 
            },
            handleOpen(key){ 
              this.default_openeds_array.push(key);
            }
          }

通过向default\_openeds\_array里push三级菜单的index可以保证二级菜单不会在切换组件时自动收起。

[20190410005347502.png]: /images/20220222/aef2f028305f4f10a20e1b4a33cd598d.png
[20190410005620942.png]: /images/20220222/ae724921dca2403ab25b0b976465e9e5.png