侧边栏组件(elementUI)

参考其他资料进行修改。
hidden当菜单不出现在侧边栏时设置为true
isNest是否嵌套，是的话里面的el-submenu不再生成图标，即只有最外层的才会生成。

<template>
<div v-if="!item.hidden">
  <template v-if="hasNoChild(item)">
    <el-menu-item :index="item.menuUrl" :class="{'submenu-title-noDropdown':!isNest}">
      <template slot="title">
        <i v-if='!isNest' class="menuIcon"></i>
        <span> {{item.menuName}}</span>
      </template>
    </el-menu-item>
  </template>

  <el-submenu v-else ref="submenu" :index="item.menuUrl">
    <template slot="title">
      <i v-if='!isNest' class="menuIcon"></i>
      <span>{{item.menuName}}</span>
    </template>

    <template v-for="(child,i) in item.childList">
      <sidebar-item v-if="child.childList&&child.childList.length>0" :is-nest="true" :item="child" :key="i" class="nest-menu" />
      <el-menu-item v-if="hasNoChild(child)" :index="child.menuUrl" :key="child.menuCode">
        {{child.menuName}}
      </el-menu-item>
    </template>
  </el-submenu>
</div>
</template>

<script>
export default {
  menuName: 'SidebarItem',
  props: {
    // route object
    item: {
      type: Object,
      required: true
    },
    isNest: {
      type: Boolean,
      default: false
    },
    basePath: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      onlyOneChild: null
    }
  },
  methods: {
    hasNoChild (item) {
      if (item.childList && item.childList.length > 0) {
        return false
      }
      return true
    }
  }
}
</script>

使用方式如下

引入组件注册
import SidebarItem from ‘@/components/SidebarItem’

 <el-menu :default-active="$route.meta.parentRoute?$route.meta.parentRoute:$route.path" class="el-menu-vertical-demo"  background-color="#182428" text-color="#c8c8c8" :unique-opened="true"  router>
          <sidebar-item v-for="(item,i) in menuList" :key="i"  :item="item"/>
  </el-menu>