frame/layout/admin/menu/menu-item.vue

<template>
  <div id="menu-item">
    <template v-for="(item, index) in menus">
      <!-- 没有子菜单情况 -->
      <template v-if="!item.children">
        <el-menu-item :index="item.path" @click="selectMenu(item.path, item.module)" :key="index">
          <i v-if="item.icon" :class="item.icon"></i>
          <span v-if="item.name" slot="title">{{ item.name }}</span>
        </el-menu-item>
      </template>
      <template v-else>
        <el-submenu :index="item.name || item.path" :key="item.name">
          <template slot="title">
            <i v-if="item && item.icon" :class="item.icon"></i>
            <span v-if="item && item.name">{{ item.name }}</span>
          </template>
          <menu-item :menus="item.children"></menu-item>
        </el-submenu>
      </template>
    </template>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'menu-item',
  props: {
    menus: { type: Array, require: true },
  },
  components: {},
  data: function() {
    return {};
  },
  created() {},
  methods: {
    selectMenu(path, modules) {
      this.$router.push({ path: path });
    },
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
.el-submenu .el-menu-item {
  min-width: 16rem !important;
  padding-left: 3rem !important;
  background-color: #000c17 !important;
  &:hover {
    color: #fff !important;
  }
}
.el-submenu__title i {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.65);
}
.el-menu-item,
.el-submenu .el-menu-item {
  &.is-active {
    background-color: #188fff !important;
    color: #fff !important;
  }
}
</style>