vue递归组件怎么实现elementUI多级菜单

这篇“Vue递归组件怎么实现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" :>            <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;            }            h2 {                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)        }    }

以上就是关于“vue递归组件怎么实现elementUI多级菜单”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。