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

<template>
  <div id="menu-item">
    <template v-for="(item, index) in menus">
      <!-- 没有子菜单情况 -->
      <template v-if="item && item.children && item.children <= 0">
        <el-menu-item :index="item.route" @click="selectMenu(item.route, item.module)" :key="index">
          <i v-if="item.icon" :class="item.icon"></i>
          <span v-if="item.title" slot="title">
            <!-- <span :style="{ paddingLeft: `${level * 1}px` }">{{ item.title }}</span> -->
            {{ item.title }}
          </span>
        </el-menu-item>
      </template>
      <template v-else>
        <el-submenu :index="item.title || item.route" :key="item.title">
          <template slot="title">
            <i v-if="item && item.icon" :class="item.icon"></i>
            <span v-if="item && item.title">
              <!-- <span :style="{ paddingLeft: `${level * 1}px` }">{{ item.title }}</span> -->
              {{ item.title }}
            </span>
          </template>
          <menu-item :menus="item.children" :level="level + 1"></menu-item>
        </el-submenu>
      </template>
    </template>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'menu-item',
  props: {
    level: { type: Number, default: 0 },
    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>