前言

在平时的开发中，书写重复代码真的太烦了~，实现配置化的能力可以大大简化开发时间，下面简单利用递归组件，实现配置化的菜单栏~

一、递归组件

我们最清楚的不过是递归函数了，在二叉树的学习中经常会碰到递归函数，那么与之对应的，当然也会有递归组件。顾名思义，其实递归组件简单的来说，就是自己调用自己。看看下面简单的例子~

子组件

<template>
  <div>
    <div v-for="item in list" :key="item.value">
      <span>{{item.label}}</span>
      <multi-form :list="item.children"></multi-form>
    </div>
  </div>
</template>

export default {
  name: 'MultiForm',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  }
}

父组件使用

<template>
  <div>
    <multi-form :list="list"></multi-form>
  </div>
</template>

import MultiForm from './multiForm'
export default {
  components: {
    MultiForm,
  },
  data() {
  retrun {
      list: [
        {
          value:1,
          label: '我是1',
          children: [
            {
              value:2,
              label:'我是2'
            }
          ]
        }
      ],  
  }
}

效果

二、配置化菜单栏

应用递归组件到el-menu中，实现配置化菜单栏

子组件

<template>
    <div>
        <div v-for="item in data" :key="item.value">
            <el-submenu v-if="item.children || (Array.isArray(item.children) && item.children.length)" :index="item.value">
                <span slot="title">{{item.label}}</span>
                <my-menu :data="item.children"></my-menu>
            </el-submenu>
            <el-menu-item v-else :index="item.value">
                {{item.label}}
            </el-menu-item>
        </div>
    </div>
</template>

export default {
    name: 'myMenu',
    props: {
        data: {
            type: Array,
            default: () => []
        }
    },
}

父组件

<template>
  <div id="app">
    <el-col :span="3" class="content">
      <el-menu 
        class="menu"
        :default-active="activeIndex"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <Menu :data="menuList"></Menu>
      </el-menu>
    </el-col>
  </div>
</template>

import Menu from './components/menu.vue';
export default {
  components: {
    Menu
  },
  data() {
    return{
      menuList:[
            {
                value: 'form',
                label: '表单系列',
                children: [
                    {
                        value: 'multiFormCheck',
                        label: '多表单校验',
                        children: [
                            {
                                value: 'form1',
                                label: '表单1'
                            },
                            {
                                value: 'form2',
                                label: '表单2'
                            }
                        ]
                    },
                    {
                        value: 'loopForm',
                        label: '循环表单'
                    }
                ]
            },
            {
                value: 'secondaryPackageCom',
                label: '封装组件'
            }
        ]
    }
  },
}

效果

补充

除此之外，还可以在menuList中增加icon字段，用来在菜单前添加一些图标，当然啦，这需要在html模板中也添加一下element的icon；也可以添加router字段，实现相应的路由跳转配置~

总结

综上，就实现简单的配置化菜单栏了，避免了重复书写el-menu-item和el-submenu啦~ github demo链接：github.com/qiangguangl…