用el-menu 写个能传入数组就可以对应渲染的代码

可以参考以下代码，其中menuList是一个数组，每个元素包含了菜单项的相关信息，如路由路径、菜单名称等：

<template>
  <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router>
    <el-submenu v-for="(menu, index) in menuList" :key="index" :index="menu.route">
      <template slot="title">
        <i :class="menu.icon"></i>
        <span>{{ menu.name }}</span>
      </template>
      <el-menu-item v-for="(item, subIndex) in menu.subMenu" :key="subIndex" :index="item.route">{{ item.name }}</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  props: {
    menuList: {
      type: Array,
      default: () => []
    }
  }
}
</script>

在父组件中，可以通过传递menuList数组来渲染菜单：

<template>
  <menu :menuList="menuList"></menu>
</template>

<script>
import Menu from './Menu.vue'

export default {
  components: {
    Menu
  },
  data() {
    return {
      menuList: [
        {
          name: '首页',
          route: '/home',
          icon: 'el-icon-s-home',
          subMenu: []
        },
        {
          name: '组件',
          route: '/components',
          icon: 'el-icon-menu',
          subMenu: [
            {
              name: '按钮',
              route: '/components/button'
            },
            {
              name: '输入框',
              route: '/components/input'
            }
          ]
        }
      ]
    }
  }
}
</script>

这样就可以根据menuList数组的内容动态渲染菜单了。