vue.js与element-ui实现菜单树形结构的解决方法


Posted in Javascript onApril 21, 2018

由于业务需要,要求实现树形菜单,且菜单数据由后台返回,在网上找了几篇文章,看下来总算有了解决办法。

场景:根据业务要求,需要实现活动的树形菜单,菜单数据由后台返回,最后的效果图如下:

vue.js与element-ui实现菜单树形结构的解决方法

后台返回的数据格式是这个样子的:

data=[{
 pID:'1',//父ID
 name:'目录一',
menuID:'m1',//本身ID






isContent:false//判断是否是目录
},
 {
pID:'1',
 name:'目录二',
menuID:'m2',







isContent:false
 },
 {
 pID:'m1',
 name:'目录一--菜单一',
menuID:'m11',







isContent:true
 },
 {
 pID:'m1',
 name:'目录一--目录一',
menuID:'m12',







isContent:false
 },





 {






pID:'m12',
 name:'目录一--目录一--菜单一',
menuID:'m121',






 isContent:true
 },
 {
 pID:'m2',
 name:'目录二--菜单一',
menuID:'m21',







isContent:true
 },
 {
 pID:'m2',
 name:'目录二--菜单二',
menuID:'m22',







isContent:true
 },
 ]

这是一串具有父子关系的数据,首先就是要把这一大串数据转化成树形结构:

tree(){
        let data=[{
              pID:'1',//父ID
              name:'目录一',
              menuID:'m1',//本身ID
  





isContent:false//判断是否是目录
            },
            {
              pID:'1',
              name:'目录二',
              menuID:'m2',
  






isContent:false
            },
            {
              pID:'m1',
              name:'目录一--菜单一',
              menuID:'m11',
  






isContent:true
            },
            {
              pID:'m1',
              name:'目录一--目录一',
              menuID:'m12',
  






isContent:false
            },
  




 {
    





pID:'m12',
              name:'目录一--目录一--菜单一',
              menuID:'m121',
  





 isContent:true
            },
            {
              pID:'m2',
              name:'目录二--菜单一',
              menuID:'m21',
  






isContent:true
            },
            {
              pID:'m2',
              name:'目录二--菜单二',
              menuID:'m22',
  






isContent:true
            },
          ]
        let tree = []
        for(let i=0;i<data.length;i++){
          if(data[i].pID == '1'){
            let obj = data[i]
            obj.list = []
            tree.push(obj)
            data.splice(i,1)
            i--
          }
        }
        menuList(tree)
        console.log(tree)
        function menuList(arr){
          if(data.length !=0){
            for(let i=0; i<arr.length;i++){
              for(let j=0;j<data.length;j++){
                if(data[j].pID == arr[i].menuID){
                  let obj = data[j]
                  obj.list = []
                  arr[i].list.push(obj)
                  data.splice(j,1)
                  j--
                }
              }
              menuList(arr[i].list)
            }
          }
        }
      }

运行完后返回的结构就是这个样子:

[{"pID":"1","name":"目录一","menuID":"m1","isContent":false,"list":[{"pID":"m1","name":"目录一--菜单一","menuID":"m11","isContent":true,"list":[]},{"pID":"m1","name":"目录一--目录一","menuID":"m12","isContent":false,"list":[{"pID":"m12","name":"目录一--目录一--菜单一","menuID":"m121","isContent":true,"list":[]}]}]},{"pID":"1","name":"目录二","menuID":"m2","isContent":false,"list":[{"pID":"m2","name":"目录二--菜单一","menuID":"m21","isContent":true,"list":[]},{"pID":"m2","name":"目录二--菜单二","menuID":"m22","isContent":true,"list":[]}]}]

接下来就要展示了,项目中用的element-ui的导航菜单组件,为了实现这样的树形结构,将每一级的菜单单独作为一个组件,通过判断isContent的值来递归。我直接把代码贴出来

<el-menu 
      theme="dark"
      :default-active="openMenuID"
      :default-openeds="openMenuArr"
      class="el-menu"
     @select="handleSelect">
      <template v-for="(item,index) in menuList">
         <el-submenu :index=item.menuID v-if="item.IsContent">
           <template slot="title">
          <i class="el-icon-menu"></i>
             {{item.name}}
           </template>
           <tree-menu :data="item.list"></tree-menu>
         </el-submenu>
         <el-menu-item :index=item.menuID v-else>{{item.name}}</el-menu-item>
      </template>
    </el-menu>

tree-menu组件的代码:

<template v-for="(menu,index) in data">
      <el-submenu :index=menu.menuID v-if="menu.IsContent">
        <template slot="title">
          <i class="el-icon-plus"></i>
          {{menu.name}}</template>
        <tree-menu :data="menu.list"></tree-menu>
      </el-submenu>
      <el-menu-item v-else :index=menu.menuID>
        {{menu.name}}
      </el-menu-item>
    </template>

总结

以上所述是小编给大家介绍的vue.js与element-ui实现菜单树形结构的解决方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JS拖动技术 关于setCapture使用
Dec 09 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
浅谈重写window对象的方法
Dec 29 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
javascript填充默认头像方法
Feb 22 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
JS装饰器函数用法总结
Apr 21 #Javascript
vue 之 .sync 修饰符示例详解
Apr 21 #Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 #Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 #Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 #jQuery
vue多页面开发和打包正确处理方法
Apr 20 #Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 #Javascript
You might like
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
phpstrom使用xdebug配置方法
2013/12/17 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
TensorFlow实现模型评估
2018/09/07 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
波兰补充商店:Muscle Power
2018/10/29 全球购物
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
大学生全国两会报告感想
2014/03/17 职场文书
监察建议书格式
2014/05/19 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
科技活动总结范文
2015/05/11 职场文书
公安机关起诉意见书
2015/05/20 职场文书
旗帜观后感
2015/06/08 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL