+element+＜el-menu＞ 导航菜单二次封装，递归、无限循环遍历，支持横向排列、纵向排列

父组件

<template>
    <div class="element-box">
        <el-menu 
            :default-active="value"
            @select="changeEvent"
        >
            <menu-tree :menuData="dataList"></menu-tree>
        </el-menu>
   </div>
</template>
<script>
    import MenuTree from '@/components/plat-components/menu-tree'
    export default {
    
    
        components: {
    
    
            'menu-tree':MenuTree,
        },
        data(){
    
    
            return{
    
    
                value:'',
                dataList:[],//选项数据
            }
        },
    }
</script>

子组件 menu-tree.js

<template>
    <fragment>
        <template v-for="item in this.menuData">
            <el-submenu v-if="item.children&&item.children.length>0" :key="item.id" :index="item.value">
                <template slot="title">
                    <span>{
    
    {
    
    item.text}}</span>
                </template>
                <menu-tree :menuData="item.children"></menu-tree> 
            </el-submenu>
            <el-menu-item v-else :key="item.id" :index="item.value">{
    
    {
    
    item.text}}</el-menu-item>
        </template>
    </fragment>
</template>
 
<script>
    export default {
    
    
        name: "menu-tree",//必须要 递归组件的关键，并且要与引入组件的变量名称一致
        props: ["menuData"],
    };
</script>

这里引用了fragment 这个技术的原因,主要是为了把fragment 当成根节点 然后循环 template 标签，因为 vue 默认的template 不能在根节点循环
引用方法：
vue 下载包: npm i -s vue-fragment
在main.js里添加代码

import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)