vue Element左侧无限级菜单实现


Posted in Javascript onJune 10, 2020

最近项目中,要用到element-ui的无限级分类菜单,根据角色生成不同的递归数据,查阅了网上很多资料,发现很多都不太完整并且没有很多的延伸性。

梳理递归数据

我们一般拿到后台的数据是:1.扁平化数据格式2.递归式数据格式

let arr = [
{
  name:小七,
  id:1
},
{
  name:小八,
  id:2
},
{
  name: 小九,
  id:3
}
]

我们从后台拿到的是这种扁平化处理数据,那我们实现递归菜单的话需要什么数据格式呢,需要格式如下:

let menuItems = [
{
  name:小七,
  id:1,
  children:[
    {
      name: '啥也不是',
      pid:2
    }
  ]
},
{
  name:小八,
  id:2,
  children:[
    {
      name:'随便写哦',
      pid:3,
      children:[
        {
          name: '再次深入',
          pid: 4,
          children:[
            {
              name: '撒打算',
              pid:666
            }
          ]
        }
      ]
    }  
  ]
},
{
  name: 小九,
  id:3
}
]

我们就需要类似于以上的这种数据格式:
扁平化数据转换递归数据,下面贴出我的数据处理方法:
注:应为在网上看到的许多的递归处理方法都不一样,有的文章写于很早很多方法都比较复杂或者代码比较多余

computed: {
  treeData() {
   let cloneData = JSON.parse(JSON.stringify(this.tableData)); // 对源数据深度克隆
   return cloneData.filter(father => {
    let branchArr = cloneData.filter(child => father.id == child.pid); //返回每一项的子级数组
    branchArr.length > 0 ? (father.children = branchArr) : ""; //如果存在子级,则给父级添加一个children属性,并赋值
    return father.pid == 0; //返回第一层
   });
  }
 },

其中this.tableData就是后台给到我的扁平化数据,这里将其替换就可以

当时处理此功能时没有考虑到子级或者父级有可能值位udfriend 所以没有做判断,如果想完善此递归数据处理的可以完善一下。

数据处理就要开始写代码了!

这里用到了vue-ement-ui的左侧菜单

老规矩,程序员交流用代码

index.vue

<el-menu
    background-color="#304156"
    text-color="#fff"
    active-text-color="#409eff"
    :collapse="isActive"
    :collapse-transition="false"
    :unique-opened="true"
    :router="true"
    :default-active="activePath"
   >
    <menu-tree :menuData="treeData" @saveNavStart="saveNavStart"></menu-tree>
   </el-menu>
   
   这里的激活样式用的是缓存的办法
   // 保存链接的激活状态
  saveNavStart(activePath) {
   window.sessionStorage.setItem("activePath", activePath);
   this.activePath = activePath;
  },
  created() {
    this.activePath = window.sessionStorage.getItem("activePath");
  }

menuTree.vue组件

实现左侧无限级菜单最重要的就是 组件自身调用自身
废话不多说,上代码:

<template>
 <div>
  <label v-for="menu in menuData" :key="menu.id">
   <el-submenu :index="String(menu.id)" v-if="menu.children">
    <template slot="title">
     <i class="el-icon-edit"></i>
     <span>{{menu.menu_name}}</span>
    </template>
    <label>
     <menutree :menuData="menu.children"></menutree>
    </label>
   </el-submenu>
   <el-menu-item :index="menu.path" @click="saveNavStart(menu.path)" v-else>
    <i class="el-icon-edit"></i>
    <span>{{menu.menu_name}}</span>
   </el-menu-item>
  </label>
 </div>
</template>

methods:{
  saveNavStart(activePath) {
    this.$emit('saveNavStart',activePath)
  }
  }
}

到此就实现了左侧菜单的无限级了,应为现在给公司写的项目都是权限功能,路由方面呢大家可以随便写,公司项目做了权限:左侧菜单,按钮限制,菜单限制,接口限制目前是四种。
本人只是一个小白,分享在项目中遇到的问题,在百度没有找到好的方法,踩坑分享出来。

到此这篇关于vue Element左侧无限级菜单实现的文章就介绍到这了,更多相关vue Element左侧无限级菜单内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
Javascript浅谈之this
Dec 17 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
封装属于自己的JS组件
Jan 27 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 #Javascript
Vue中key的作用示例代码详解
Jun 10 #Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 #Javascript
js 获取扫码枪输入数据的方法
Jun 10 #Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 #Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 #Javascript
详解vue高级特性
Jun 09 #Javascript
You might like
[转帖]PHP世纪万年历
2006/12/06 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
php面向对象重点知识分享
2019/09/27 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
js 操作select相关方法函数
2009/12/06 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
Python yield 使用方法浅析
2017/05/20 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
size?德国官方网站:英国伦敦的球鞋精品店
2018/03/17 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
理工大学毕业生自荐信
2013/11/01 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
安全目标管理责任书
2014/07/25 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
信用卡工资证明范本
2015/06/19 职场文书
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android