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

发布时间:2023-01-13 15:30

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

先看效果:

vue递归组件实现elementUI多级菜单_第1张图片

一、子组件


 

二、菜单数据准备

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

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
}

三、父组件调用


 

 

补充(面包屑的展示):

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

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

html:


    {{item}}

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)
        }
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号