vue+el-menu如何實(shí)現(xiàn)菜單欄無限多層級(jí)分類

這篇文章主要介紹了vue+el-menu如何實(shí)現(xiàn)菜單欄無限多層級(jí)分類，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

具體內(nèi)容如下

思路：數(shù)據(jù)格式須為數(shù)組內(nèi)部多層嵌套模式，利用遞歸渲染菜單欄數(shù)據(jù)實(shí)現(xiàn)菜單多層級(jí)分類。

1.模擬菜單數(shù)據(jù)，引入封裝組件

<template>
  <div class="container">
    <el-container>
      <el-header>Header</el-header>
      <el-container class="container-body">
        <el-aside class="menu-container">
 
          <!-- 實(shí)現(xiàn)菜單多級(jí)分類 -->
          <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: '一級(jí)菜單01',
          children: [
            {
              index: '1-1',
              icon: 'el-icon-film',
              name: '二級(jí)菜單01',
              children: [
                {
                  index: '1-1-1',
                  icon: 'el-icon-date',
                  name: '三級(jí)菜單01',
                  children: [
                    {
                      index: '1-1-1-1',
                      icon: 'el-icon-monitor',
                      name: '四級(jí)菜單01'
                    }
                  ]
                },
                {
                  index: '1-1-2',
                  icon: 'el-icon-headset',
                  name: '三級(jí)菜單02'
                }
              ]
            },
            {
              index: '1-2',
              icon: 'el-icon-data-line',
              name: '二級(jí)菜單02'
            }
          ]
        },
        {
          index: '2',
          icon: 'el-icon-s-data',
          name: '一級(jí)菜單02'
        },
        {
          index: '3',
          icon: 'el-icon-s-operation',
          name: '一級(jí)菜單03'
        },
        {
          index: '4',
          icon: 'el-icon-user',
          name: '一級(jí)菜單04'
        }
      ]
    }
  },
  mounted () {},
  methods: {}
}
</script>

2.MenuTree組件內(nèi)部實(shí)現(xiàn)菜單欄遞歸渲染

<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.完成效果展示

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue+el-menu如何實(shí)現(xiàn)菜單欄無限多層級(jí)分類”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!