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通过Ajax提交表单并返回结果
Jul 31 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
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调用Oracle存储过程的方法
2008/09/12 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
php生成静态页面的简单示例
2014/04/17 PHP
php计算整个目录大小的方法
2015/06/01 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
javascript回调函数详解
2018/02/06 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
缓刑人员的思想汇报
2014/01/11 职场文书
母校寄语大全
2014/04/10 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
python创建字典及相关管理操作
2022/04/13 Python