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 相关文章推荐
Jquery 学习笔记(一)
Oct 13 Javascript
javascript demo 基本技巧
Dec 18 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 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+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
javascript处理table表格的代码
2010/12/06 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
Python 字符串定义
2009/09/25 Python
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
详解python with 上下文管理器
2020/09/02 Python
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
三个儿子教学反思
2014/02/03 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
群众路线个人整改方案
2014/10/25 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
佛光寺导游词
2015/02/10 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
Java设计模式之代理模式
2022/04/22 Java/Android