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 相关文章推荐
javascript new后的constructor属性
Aug 05 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
在普通HTTP上安全地传输密码
2007/07/21 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
vue滚动tab跟随切换效果
2020/06/29 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
python计算N天之后日期的方法
2015/03/31 Python
Python json模块使用实例
2015/04/11 Python
Python实用日期时间处理方法汇总
2015/05/09 Python
Python中的自省(反射)详解
2015/06/02 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
logging level级别介绍
2020/02/21 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
恶意软件的定义
2014/11/12 面试题
初级Java程序员面试题
2016/03/03 面试题
无故旷工检讨书
2014/01/26 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
公司员工离职感言
2015/08/03 职场文书
导游词之山东红叶谷
2019/10/31 职场文书