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函数整理
Oct 25 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
如何通过vscode运行调试javascript代码
Jul 24 Javascript
js实现全选和全不选
Jul 28 Javascript
JS遍历树层级关系实现原理解析
Aug 31 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 Javascript
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
PHP执行速率优化技巧小结
2008/03/15 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
全面了解js中的script标签
2016/07/04 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
python使用socket连接远程服务器的方法
2015/04/29 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
理货员的岗位职责
2013/11/23 职场文书
机关门卫制度
2014/02/01 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
新年爱情寄语
2014/04/08 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
高二学生评语大全
2014/04/25 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
商铺租房协议书范本
2014/12/04 职场文书
务虚会发言材料
2014/12/25 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
管理失职检讨书范文
2015/05/05 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
PyTorch device与cuda.device用法
2022/04/03 Python