element-plus实现侧边栏手风琴效果

最近在跟小伙伴一起写项目的时候，有一个需要实现侧边栏路由跳转的功能，但是我在研究了element-plus自带的侧边栏的时候，我发现当你把一个折叠面板点开之后，再点开其他的折叠面板之后，原来点开的那个面板并不会自己折叠起来，我认为这样会严重影响用户体验感，于是就把element-plus中的侧边栏与手风琴效果进行结合，话不多说，上代码：

       //最外层要用el-menu包裹，不然会报错
       //accordion参数表示是手风琴效果
       <el-menu default-active="2" class="el-menu-vertical-demo">
          <el-collapse
            v-model="activeName"
            accordion
          >
            <el-collapse-item title=" 一面" name="1">
              <el-menu-item index="1-1">面经</el-menu-item>
              <el-menu-item index="1-2">视频</el-menu-item>
            </el-collapse-item>
          </el-collapse>
          <el-collapse
            v-model="activeName"
            accordion
          >
            <el-collapse-item title=" 二面" name="2">
              <el-menu-item index="2-1">面经</el-menu-item>
              <el-menu-item index="2-2">视频</el-menu-item>
            </el-collapse-item>
          </el-collapse>
          <el-collapse
            v-model="activeName"
            accordion
          >
            <el-collapse-item title=" 三面" name="3 ">
              <el-menu-item index="3-1">面经</el-menu-item>
              <el-menu-item index="3-2">视频</el-menu-item>
            </el-collapse-item>
          </el-collapse>
        </el-menu>

实现效果如下：

在代码element-plus的具体位置展示

 

 如果有什么错误或者其他更好的建议，欢迎各位大佬在留言，大家一起学习进步