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>

element NavMenu侧栏导航菜单（可折叠）的相关教程结束。