boss/components/menu/index.vue

<template>
  <el-menu default-active="1-1" class="main-menu" @open="handleOpen" @close="handleClose">
    <el-submenu v-for="(menu, index) of menus" :key="index" :index="String(index)">
      <template slot="title">
        <span class="menu-title" slot="title">{{menu.title}}</span>
      </template>
      <el-menu-item
        v-for="(sub, subIndex) of menu.subs"
        :key="subIndex"
        :index="String(index) + subIndex"
        @click.native="$router.push({ name: getPathName(sub) })"
      >{{sub.title}}</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import data from './data'
// console.log(data)
let menus = data.map(menu => ({
  ...menu,
  subs: menu.subs.filter(sub => !sub.hidden)
}))

export default {
  props: [],
  data() {
    return {
      menus,
    }
  },
  mounted() {
  },
  methods: {
    getPathName(sub) {
      let name = `main-index`
      if(sub.path) name = `main-index-${sub.path}`
      return name
    },
    handleOpen() {
      // console.log('open')
    },
    handleClose() {
      // console.log('close')
    },
  },
}
</script>

<style scoped>
.menu-title {
  padding: 0 16px;
}
</style>