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

最新推荐文章于 2024-08-07 23:19:53 发布

lvan找不到bug

最新推荐文章于 2024-08-07 23:19:53 发布

阅读量1.1w

点赞数 8

分类专栏： Vue 文章标签： vue element el-menu

本文链接：https://blog.csdn.net/l508742729/article/details/107109226

版权

本文介绍如何利用Vue.js和Element UI的el-menu组件，通过递归方法处理多层嵌套的菜单数据，实现无限层级的菜单栏分类。步骤包括模拟菜单数据、在MenuTree组件中实现递归渲染，以及最终效果的展示。

摘要由CSDN通过智能技术生成

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

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>