本篇内容介绍了“elementUI多级菜单怎么样做，操作过程是什么”的有关知识，在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

 本文实例为大家分享了vue递归组件实现elementUI多级菜单的具体代码，供大家参考，具体内容如下

先看效果：

一、子组件

<template>
    <div class="myDiv">
        <!-- 这里的listAll用于接收父组件传递进来的菜单列表 -->
        <template v-for="(item,i) in listAll">
            <!-- 有child就显示child的下拉型菜单，有小箭头 -->
            <el-submenu :index="item.index" :key="i" v-if="item.child.length!=0">
                <template slot="title">
                    <img :src="item.img" alt="">
                    <span>{{item.title}}</span>
                </template>
                <!-- 再次调用自身组件，传入子集，进行循环递归调用 -->
                <Menu :listAll="item.child"></Menu>
            </el-submenu>
            <!-- 没有child,就显示单个目录，没有小箭头 -->
            <el-menu-item :index="item.index" v-else :key="i" @click="handleSelect(item.path,item.title,item.index)">
                <span slot="title"><img :src="item.img" alt="">{{item.title}}</span>
            </el-menu-item>
        </template>
    </div>
</template>
 
<script>
export default {
    name: 'Menu',
    components: {},
    props: ['listAll'],
    data() {
        return {
            realList: this.listAll,
        }
    },
    methods: {
        //设置路由跳转
        handleSelect(path, name, selfIndex) {
            this.$router.push(
                {
                    path: "/" + path,
                    query: {
                        r_n: name,
                        index: selfIndex
                    }
                }
            )
        },
       
    },
}
</script>

二、菜单数据准备

菜单中包含索引，图片，名称，跳转路径，这里我给出一部分数据，路由直接用数字了，你们最好定义为组件的英文名称，这样方便维护。

export function menuJson() {
  var data = [{
    title: "元数据管理",
    img: "../../../static/img/manager.png",
    index: '1',
    child: [
      {
        "title": "元数据信息描述管理", "path": "main/02/005", "img": "../../../static/img/manager.png", "index": "1-2", "child": []
      },
      {
        "title": "元数据分组定义管理", "path": "main/02/007", "img": "../../../static/img/manager.png", "index": "1-3", "child": []
      },
      {
        "title": "元数据信息管理", "path": "main/02", "img": "../../../static/img/manager.png", "index": "1-1", "child": [
          { "title": "采集元数据", "path": "main/02/001", "index": "1-1-1", "img": "../../../static/img/blood.png", "child": [] },
          { "title": "元模型", "path": "main/02/004", "index": "1-2-1", "img": "../../../static/img/blood.png", "child": [] },
        ]
      },
 
      {
        "title": "元数据统计分析管理", "path": "main/01", "index": "1-4", "img": "../../../static/img/manager.png", "child": [
          { "title": "元数据变更管理", "path": "main/01/001", "index": "1-4-1", "img": "../../../static/img/blood.png", "child": [] },
          { "title": "数据地图", "path": "main/01/002", "index": "1-4-2", "img": "../../../static/img/blood.png", "child": [] },
          {
            "title": "元数据分析", "path": "main/01/003", "index": "1-4-3", "img": "../../../static/img/yuanfenxi.png", "child": [
 
              { "title": "血缘分析", "path": "main/01/003/0001", "index": "1-4-3-1", "img": "../../../static/img/blood.png", "child": [] },
              { "title": "属性差异分析", "path": "main/01/003/0003", "index": "1-4-3-2", "img": "../../../static/img/chayi.png", "child": [] },
              { "title": "影响分析", "path": "main/01/003/0004", "index": "1-4-3-3", "img": "../../../static/img/impact.png", "child": [] },
            ]
          },
 
        ]
      },
    ]
  },
  {
    title: "规则管理",
    img: "../../../static/img/manager.png",
    index: '2',
    child: [
      { "title": "数据接口定义管理", "index": "2-1", "path": "main/03/001", "img": "../../../static/img/source.png", "child": [] },
      { "title": "数据转换规则管理", "index": "2-2", "path": "main/03/004", "img": "../../../static/img/modify.png", "child": [] },
    ]
  }
  ]
  return data
}

三、父组件调用

<template>
    <div class="content menu">
        <div class="menu_com" :style="{height:scrollHeight+'px'}">
            <el-col :span="24">
                <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :default-openeds="defalutIndex" background-color="#003289" text-color="#fff" active-text-color="#ffd04b">
                    //调用子组件
                    <Menu :listAll="listAll"></Menu>
                </el-menu>
            </el-col>
        </div>
    </div>
</template>
 
<script>
import Menu from './menu'
import { menuJson } from '../../assets/common/http' //调用js文件中的菜单数据
export default {
    name: "Menus",
    mixins: [mixin],
    components: { Menu },
    data() {
        return {
            scrollHeight: 400,
            listAll: [],
            activeIndex: "-1",
            defalutIndex: []
        }
    },
    created() {
        //设置点击菜单的索引，可以使得刷新后菜单仍保持原来查看的页面
        this.activeIndex = String(this.$route.query.index);
        this.listAll = menuJson() //通过调用函数menuJson,获取菜单
    },
    watch: {
        $route(to, from) {
            this.activeIndex = this.$route.query.index;
        }
    },
}
</script>
 
<style scoped lang="less">
@color: #003289;
    .menu {
        background: @color;
 
        > div {
            width: 100%;
            padding-top: 20px;
            // height: 100%;
            color: #ffffff;
            overflow-y: scroll;
            overflow-x: hidden;
            &::-webkit-scrollbar {
                display: none;
            }
            h1 {
                font-size: 20px;
                text-align: center;
                padding: 15px 0 25px 0;
            }
        }
    }
    .el-menu-demo {
        position: absolute;
        height: 58px !important;
        left: 25%;
        top: 0%;
    }
 
</style>

补充（面包屑的展示）：

有菜单，肯定需要面包屑的展示，例如

这里我用的方法是，根据当前页面名称，从树形菜单数据中查找它的所有父级来实现面包屑导航栏的展示。

html：

<el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item v-for="(item,index) in listMenu" :key="index">{{item}}</el-breadcrumb-item>
</el-breadcrumb>

methods:

methods: {
 //获取树形数据的某个元素的所有父节点
        getTreePath(tree, func, path) {
            if (!tree) return []
            for (const data of tree) {
                // 这里按照你的需求来存放最后返回的内容吧
                //这里的title是我的菜单数据里面的名称字段，你可以改成你的
                path.push(data.title)
                if (func(data)) return path
                if (data.child) {
                    //获取到子数据，递归调用
                    const findChildren = this.getTreePath(data.child, func, path)
                    if (findChildren.length) return findChildren
                }
                path.pop()
            }
            return []
        },
        // 获取面包屑
        getNavList() {
            var name = this.$route.query.r_n //先获取当前路由名称
            var tree = menuJson()  //获取菜单数据，menuJson这个函数上面用了，返回的事菜单数据
            this.path = [] //path用于存放所有父级，调用前需要清空
            //data => data.title === name查找数据中的title是否和当前路由名称相等
            this.getTreePath(tree, data => data.title === name, this.path)
            this.listMenu = this.path  //找到之后赋值给面包屑路由数组
            console.log(this.listMenu)
        }
    }

“elementUI多级菜单怎么样做，操作过程是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• instanceof的功能和原理怎么理解，如何手动实现instanceof

  instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上，本文重点给大家介绍JavaScript手动实现instanceof的问题，感兴趣的朋友跟随小编一起看看吧

• react中key作用是什么？key的取值你了解吗？

  react中key作用是什么？我们想要了解key作用，首先需要先了解key的三种取值，也就是不定值、索引值和确定且唯一值。下面我们从有一些实例入手分析学习，感兴趣的朋友就接着往下看吧。

• Promise的使用有哪些常见错误要留意和避免

  本篇文章给大家分享5个使用 promise 时的常见错误，帮大家快速避坑，希望对大家有所帮助！

• vue框架怎么实现页面缓存和清除缓存的功能

  这篇文章主要为大家详细介绍了vue实现页面缓存功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 如何用JavaScript写个扑克牌游戏，代码是什么

  这篇文章主要为大家详细介绍了JavaScript如何通过面向对象实现一个简单的扑克牌游戏，文中的示例代码代码讲解详细，感兴趣的可以学习一下