element NavMenu側欄導航菜單（可折疊）

展示效果如圖：

 

代碼：

<el-scrollbar class="scrollbar-wrapper">
      <!-- el-scrollbar超長可滾動 -->
      <el-menu
        :default-active="$route.path" 
        class="el-menu-vertical-demo" 
        :collapse="isCollapse"  
        @open="handleOpen" 
        @close="handleClose" 
        background-color="#1f2b35" 
        text-color="#fff" 
        active-text-color="#409eff" 
        :unique-opened="uniqueOpened" 
        router>
        <div v-for="(menu, index) in menus" :key="index">
          <el-submenu :index="index + ''" v-if="menu.subMenus!=null">
            <template slot="title">
              <svg-icon :icon-class="getIcon(menu.icon)" class-name="menu-icon mr10" />
              <!-- svg-icon為展示icon圖標 -->
              <span>{{ menu.name }}</span>
            </template>
            <el-menu-item-group v-for="(subMenu, index2) in menu.subMenus" :key="index2">
              <el-menu-item :index="subMenu.path">
                <span>{{ subMenu.name }}</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-- menu.subMenus為空時為無子項菜單的 -->
          <el-menu-item class="single" v-if="menu.subMenus==null" :key="menu.path" :index="menu.path">
            <svg-icon :icon-class="getIcon(menu.icon)" class-name="menu-icon mr10" />
            <span slot="title">{{menu.name}}</span>
          </el-menu-item>
        </div>
      </el-menu>

    </el-scrollbar>

data() {
    return {
      openeds: ['0'],
      uniqueOpened: true,
      isCollapse: false,
      menus:[
        {
          icon: "management"
          name: "訂單管理",
          path: "/",
          sort: 10,
          subMenus:[
            {
              icon: "",
              name: "訂單列表",
              path: "/ordersearch",
              sort: 11,
              subMenus: null
            }
          ]
        },
        {
          icon: "productinventory",
          name: "庫存查詢",
          path: "/productInventoryQuery",
          sort: 20,
          subMenus: null
        }
      ]
    };
  }

這樣做會出現一些問題就是菜單收縮的時候出現樣式錯亂找到的一個解決辦法就是修改他的css

<style>
.sidebar-container .el-menu--collapse .el-submenu__title span{
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}
.sidebar-container .el-menu--collapse .el-submenu__icon-arrow{
  display: none;
}
</style>