vue el-menu菜单递归循环创建

说明：
根据返回的数据动态循环渲染菜单，是否具有子级目录递归创建所有目录并具有复用性，动态绑定相关属性；
解决步骤：
1、使用element组件 el-menu,引入封装好的子组件：

<template>
  <el-menu
    :default-active="$route.path"
    background-color="rgba(0,0,0,0)"
    text-color="#314659"
    active-text-color="#0f8deb"
    unique-opened
    :mode="mode"
    router
  >
    <SubMenu :subMenuList="menuList"  :mode="mode"/>
  </el-menu>
</template>
         

2、创建公共组件
（1）在第一级菜单循环过程中，如判断出当前菜单存在着子级菜单，渲染出当前菜单，并将当前菜单的子级属性（例如：children：[数组]），利用子组件传参的方式，传给我们现在正在封装的组件（俗称：无限套娃）。
注意：
组件必须要添加name属性，名称与注册时命名一致；
真实环境中：

<template >
  <div class="box" :class="mode=='vertical'?'fx_col':'fx'">
    <template v-for="(item, index) in subMenuList">
      <el-submenu
        v-if="item.children && item.children.length > 0"
        :key="index + 'el-submenu'"
        :index="item.path"
      >
        <template slot="title">
          <i :class="item.meta.icon&&item.meta.icon"></i>
          <span>{{ item.meta.name }}</span>
        </template>
        <SubMenu :subMenuList="item.children" />
      </el-submenu>
      <el-menu-item v-else :key="index + item.path" :index="item.path">
         <template slot="title">
          <i :class="item.meta.icon&&item.meta.icon"></i>
          <span>{{ item.meta.name }}</span>
        </template>
      </el-menu-item>
    </template>
  </div>
</template>

完整代码：
（1）封装的子组件

<template >
  <div class="box fx_1"  :class="mode=='vertical'?'fx_col':'fx'">
    <template v-for="(item, index) in subMenuList">
      <el-submenu
        v-if="item.children && item.children.length > 0"
        :key="index + 'el-submenu'"
        :index="item.path"
      >
        <template slot="title">
          <i :class="item.meta.icon&&item.meta.icon"></i>
          <span>{{ item.meta.name }}</span>
        </template>
        <SubMenu :subMenuList="item.children" />
      </el-submenu>
      <el-menu-item v-else :key="index + item.path" :index="item.path">
         <template slot="title">
          <i :class="item.meta.icon&&item.meta.icon"></i>
          <span>{{ item.meta.name }}</span>
        </template>
      </el-menu-item>
    </template>
  </div>
</template>
         
<script>
import SubMenu from "./subMenu";

export default {
  name: "SubMenu", //必须要 递归组件的关键，并且要与引入组件的变量名称一致
  components: {
    SubMenu,
  },
  props: {
    subMenuList: {
      //接收到的菜单信息
      type: Array,
      default: [],
    },
    authority: {
      //填报权限 0 1不展示
      type: Number,
      default: 0,
    },
    mode: {
      //菜单 水平  垂直
      type: String,
      default: "horizontal",
    },
  },
  data() {
    return {
    };
  },
  computed:{
    
  },
  //生命周期 - 创建完成
  created() {
   
  },
  //DOM挂载完毕
  mounted() {},
  methods: {},
};
</script>
<style lang='less' scoped>
.fx_col{
  display: flex;
  flex-direction: column;
}
.fx{
  display: flex;
}
</style>

（2）引入封装好的子组件以及菜单数据

<template>
  <el-menu
    :default-active="$route.path"
    background-color="rgba(0,0,0,0)"
    text-color="#314659"
    active-text-color="#0f8deb"
    unique-opened
    :menu-trigger="menuTrigger"
    :mode="mode"
    router
  >
    <SubMenu :subMenuList="menuList"  :mode="mode"/>
  </el-menu>
</template>
         
<script>
import SubMenu from './subMenu'
export default {
  components: {
    SubMenu,
  },
  props: {
    menuList: {
      //接收到的菜单信息
      type: Array,
      default: [],
    },
    mode: {
      //菜单 水平  垂直 horizontal / vertical
      type: String,
      default: "horizontal",
    },
    menuTrigger: {
      //菜单 水平  垂直 horizontal / vertical
      type: String,
      default: "click",
    },
  },
  data() {
    return {
      authority:0,
    };
  },
  //生命周期 - 创建完成
  created() {
  },
  //DOM挂载完毕
  mounted() {},
  methods: {},
};
</script>
<style lang='less' scoped>
.el-menu {
  border-bottom: 0;//不要下边框
  /deep/ .el-menu-item {
    /* 选中菜单颜色 */
    font-size: 18px;
    &.is-active{
      border-bottom: 2px solid #1890ff !important;
      span{
        font-weight: bold;
      }
    }
    
  }
  /* 子级菜单项 */
  /deep/ .el-submenu {
    .el-submenu__title {
      display: flex;
      align-items: center;
      span{
        padding: 0 10px;
      }
      .el-icon-location{//前图标
        position: static;
        margin: 0;
        color:#013c807e;
      }
      span{
        font-size: 18px;
      }
      i{
        font-size: 18px ;
      }
      .el-icon-arrow-down{//后图标
        position: static;
        margin: 0;
        font-size: 18px;
       span{
        font-size: 18px;
      }
      i{
        font-size: 18px ;
      }
    }
    }
  }
}
</style>

效果图：