elementui封装的菜单组件(二)

1、EMenu.vue菜单组件

<template>
  <el-menu :default-active="defaultActive"
           class="el-menu-vertical-demo"
           unique-opened
           router>
    <template v-for="(item, ind) in menu">
      <el-submenu v-if="item && item.childList.length>0"
                  :index="`${item.id}`"
                  :key="ind">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{item.name}}</span>
        </template>

        <el-menu-item-group v-for="(itm, i) in item.childList"
                            :key="i">
          <el-menu-item :index="`/${item.icon}${itm.route}`">{{itm.name}}
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item v-else
                    :index="`${item.route}`"
                    :key="ind">
        <i class="el-icon-menu"></i>
        <span slot="title">{{item.name}}</span>
      </el-menu-item>
    </template>

  </el-menu>
</template>

<script>
export default {
  data () {
    return {
      defaultActive: '',
      menu: [......]
    }
  }
}
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  min-height: 400px;
  height: 100%;
}
</style>

2、父组件调用

<el-aside width="200px">
          <EMenu></EMenu>
</el-aside>
.....
import EMenu from '@/components/EMenu.vue'
export default {
  components: { EMenu },
  data () {
    return {
    }
  }
}