NavMenu.vue

<template>
  <div class="navMenu">
    <template v-for="navMenu in navMenus" >
        <!-- 最后一级菜单 -->
      <el-menu-item v-if="!navMenu.childs&&navMenu.entity" :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name">
        <!-- <i :class="navMenu.entity.icon"></i> -->
        <span slot="title" >{{navMenu.entity.alias}}</span>
      </el-menu-item>
      <!-- 此菜单下还有子菜单 -->
      <el-submenu v-if="navMenu.childs&&navMenu.entity"
                  :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name"> 
        <template slot="title">
           <!-- <i class="el-icon-remove-outline" v-if="activeIndex == navMenu.entity.name"></i> -->
          <i :class="navMenu.entity.icon" style="color:#ff4dff"></i>
         
          <span> {{navMenu.entity.alias}}</span>
          <!-- <span> 555{{navMenu.entity}}</span> -->
          <!-- <span> 88{{activeIndex}}</span> -->
        </template>
        <!-- 递归 -->
        <NavMenu :navMenus="navMenu.childs" id="childsId"></NavMenu>
      </el-submenu>
    </template>

  </div>
</template>

<script>
  export default {
    name: 'NavMenu',
    props: ['navMenus','activeIndex'],
    data() {
      return {}
    },
    mounted(){
      console.log(1089,this.activeIndex)
    },
    methods: {
     
    }
  }
</script>

<style scoped>
>>>.el-submenu .el-menu{
  margin-left: 30px !important
}
li{
  padding-left: 5px !important;
}

#childsId{
  border-left: 3px solid #33ff77  !important;
}
</style>