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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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的简单采集数据入库程序
2014/07/30 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
python中使用PIL制作并验证图片验证码
2018/03/15 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
python自定义时钟类、定时任务类
2021/02/22 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
关键在于落实心得体会
2014/09/03 职场文书
法制演讲稿
2014/09/10 职场文书
收款委托书范本
2014/09/11 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书