vue+el-menu如何实现菜单栏无限多层级分类

这篇文章主要介绍了vue+el-menu如何实现菜单栏无限多层级分类，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

具体内容如下

思路：数据格式须为数组内部多层嵌套模式，利用递归渲染菜单栏数据实现菜单多层级分类。

1.模拟菜单数据，引入封装组件

<template>  <div class="container">    <el-container>      <el-header>Header</el-header>      <el-container class="container-body">        <el-aside class="menu-container">           <!-- 实现菜单多级分类 -->          <el-menu            default-active="1-1-1-1"            background-color="#545c64"            text-color="#fff"            active-text-color="#ffd04b">            <!-- 引入组件 -->            <menu-tree :menuData="menuList"></menu-tree>          </el-menu>         </el-aside>        <el-main class="main-container">Main</el-main>      </el-container>    </el-container>  </div></template> <script>import MenuTree from '../../components/MentTree'export default {  components: {    MenuTree  },  data () {    return {      menuList: [        {          index: '1',          icon: 'el-icon-menu',          name: '一级菜单01',          children: [            {              index: '1-1',              icon: 'el-icon-film',              name: '二级菜单01',              children: [                {                  index: '1-1-1',                  icon: 'el-icon-date',                  name: '三级菜单01',                  children: [                    {                      index: '1-1-1-1',                      icon: 'el-icon-monitor',                      name: '四级菜单01'                    }                  ]                },                {                  index: '1-1-2',                  icon: 'el-icon-headset',                  name: '三级菜单02'                }              ]            },            {              index: '1-2',              icon: 'el-icon-data-line',              name: '二级菜单02'            }          ]        },        {          index: '2',          icon: 'el-icon-s-data',          name: '一级菜单02'        },        {          index: '3',          icon: 'el-icon-s-operation',          name: '一级菜单03'        },        {          index: '4',          icon: 'el-icon-user',          name: '一级菜单04'        }      ]    }  },  mounted () {},  methods: {}}</script>

2.MenuTree组件内部实现菜单栏递归渲染

<template>  <div>    <template v-for="menu in this.menuData">      <el-submenu :key="menu.index" :index="menu.index" v-if="menu.children">          <template slot="title">              <i :class="menu.icon"></i>              <span slot="title">{{menu.name}}</span>          </template>          <menu-tree :menuData="menu.children"></menu-tree>      </el-submenu>      <el-menu-item :key="menu.index" :index="menu.index" v-else>          <i :class="menu.icon"></i>          <span slot="title">{{menu.name}}</span>      </el-menu-item>    </template>  </div></template> <script>export default {  props: ['menuData'],  name: 'MenuTree'}</script>

3.完成效果展示

感谢你能够认真阅读完这篇文章，希望小编分享的“vue+el-menu如何实现菜单栏无限多层级分类”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!