el-menu多级动态菜单渲染

使用el-menu时往往会遇到动态渲染使用场景

安装和引用element暂不赘叙，对其使用方法不是很熟悉的小伙伴可以去官网按照指引完成使用

先简单叙述一下渲染思路：
首先我们要知道要渲染一个多级菜单的过程实际上就是对后端给我们的多层数据格式进行循环遍历的一个过程，只是在遍历的过程中，需要对是否submit-menu和普通el-menu-item进行判断。

这里使用的是自定义组件

创建MenuTree组件

src/components/MenuTree.vue
// 以下是组件内容
<div>
    <template v-for="menu in menuList">
      <!-- 如果当前有子菜单，则显示 el-submenu ，在el-subment 里调用 递归组件 -->
      <el-submenu
        v-if="menu.children && menu.children.length > 0"
        :index="menu.path"
        :key="menu.id"
      >
        <template slot="title">
          <i :class="menu.icon"></i>
          {{ menu.serverName }}
        </template>
        <!-- 调用自身  此处是重点-->

        <MenuTree :menuList="menu.children"></MenuTree>
      </el-submenu>
      <!-- 如果没有子菜单，则显示当前内容 -->
      <el-menu-item v-else :index="menu.path" :key="menu.id">
        <i :class="menu.icon"></i>
        {{ menu.serverName }}
      </el-menu-item>
    </template>
  </div>

注意项

1.这里的MenuTree 是vue的递归组件，实际上就是自己调用自己这里组件中调用自己的组件名字是name属性。
2.一点要在递归组件中加上判断条件，否则可能会造成爆栈。
3.这里的属性名字请根据自己后端传递的数据字段名字改变。

实例代码

export default {
  name: "MenuTree", // 这里就是上边递归组件中使用的组件名字
  props: {
    menuList: {  // 在这里增加了引入校验，方便错误排除
      type: Array,
      required: false,
    },
  },
  mounted() {},
};

以上就是我对多级菜单的渲染过程了。

便于理解补充上menuList的数据结构