树形菜单，动态生成

子组件

<template>
  <div class="Menu" ref="Menu" id="Menu" style="width:13vw;font-weight:700">
    <template v-for="(Menu) in Menus">
      <!-- 最后一级菜单，index必须存在才可以设置默认值 -->
      <el-menu-item :id=Menu.id
        v-if="!Menu.children && Menu.label"
        :key="Menu.value"
        :index="String(Menu.value)"
        @click="changeEntity(Menu.label,Menu.value)"
      >
        <span :class=Menu.id slot="title">{{ Menu.label }}</span>
      </el-menu-item>

      <!-- 此菜单下还有子菜单 -->
      <el-submenu :id="Menu.id"
        v-if="Menu.children && Menu.label"
        :key="Menu.value"
        :index="String(Menu.value)"
      >
        <template slot="title">
          <span :class=Menu.id> {{ Menu.label }}</span>
        </template>
        <!-- 递归 -->
        <Menu :Menus="Menu.children"></Menu>
      </el-submenu>
    </template>
  </div>
</template>
<script>
export default {
  name: "Menu",
  props: ["Menus"],
  data() {
    return {};
  },
  methods: {
    changeEntity(label,value){
       // this.$parent获取父组件事件，动态菜单的级别是未知的，故$parent的使用不能确定找到第几级才是父组件
       // 父组件处于根节点的第几级，是可以确定的。所以可以使用$children找父组件
      // 触发父组件事件，并传值给父组件
      this.$root.$children[0].$children[0].fathermethod(label,value)
    }
  },
};
</script>
<style>
.Menu .el-submenu .el-menu-item {
  min-width: 94px;
}
.Menu .el-menu ul{
  z-index: 10;
}
.Menu .el-menu li{
  padding-left: 0px !important;
}
/* #Menu ::-webkit-scrollbar{width:0;}
 */
.Menu .el-menu ul ::-webkit-scrollbar{display: none;}
/* .Menu .el-submenu .el-menu-item {
  background-color: #162b2478 !important;
} */
.Menu .el-menu-item:hover {
  background-color: #1f2d3d75 !important;
}
.Menu .el-menu-item.is-active{
  /* padding: 0%; */
  color: #fff;
  background-color: rgb(91, 191, 119) !important;
  z-index: 99;
}
/* .Menu .el-submenu__title{
  background-color: #7c7e8275 !important;
}*/
.Menu .el-submenu__title:hover {
  background-color: #1f2d3d75 !important;
} 
.Menu .el-submenu__title i {
    color: #fff;
}
/* #all {
  background-color: #0e0e0e25;
  font-size: 17px;
} */
#menuOne{
  background-color: #424a48;
}
#menuTwo{
  background-color: #62706F;
}
#menuThree{
  background-color: #818B8C;
}
.menuOne{
  font-size: 17px !important;
}
.menuTwo{
  font-size: 16px !important;
  font-weight: 500;
}
.menuThree{
  font-size: 14px !important;
  font-weight: 100;
}
</style>

父组件

<el-menu 
      text-color="#fff"
      active-text-color="#fff"
      style="
        float: left;
        width: 13vw;
        min-width: 94px;
        height: 87vh;
        min-height: 750px;
        z-index: 10;
      "
      :default-active="activeIndex"
    >
      <Menu id="menu" style="width: 13vw;height: 750px;overflow:auto;min-width: 94px;" :Menus="menuData" :fathermethod="fathermethod"></Menu>
    </el-menu>
<script>
import Menu from "./Menu.vue";
export default {
  data() {
     return {
        // 默认选定的菜单值
	    activeIndex: "",
        menuData: []
    }
  }，
  methods: {
     // 被子组件触发的父组件的事件
  	 fathermethod(label,value) {
        console.log("father",label, value);
     }
  }
}
<style>
#monitor .el-submenu .el-menu-item {
  padding: 0%;
}
#monitor .el-menu-item.is-active{
  /* padding: 0%; */
  color: #fff;
  background-color: rgb(91, 191, 119);
  z-index: 99;
}
#monitor li {
  padding-left: 0px !important;
}
/* #menu ::-webkit-scrollbar{width:0;} */
#monitor ul ::-webkit-scrollbar{display: none;}
#monitor .el-submenu__title{
  padding-left: 0px !important;
}
</style>