Vue递归实现树形菜单方法实例


Posted in Javascript onNovember 06, 2018

什么是树形菜单还是要简单的??乱幌拢?热纾?/p>

Vue递归实现树形菜单方法实例

上图是截图自elementui的实例,实现方式是用文档结构(类似像原生Dom文档结构的写法)的方式,好处就是很灵活,可以方便的自定义,作为一个通用视图组件库这是正确的做法。

在实际的企业应用中,菜单要比这复杂很多,层次也要多很多,如果我们采取手动编写文档结构的方式,会导致代码亢长,阅读和维护都很低效。毫无疑问所有Vuer都会想到用一个数据结构来驱动文档结构。vue-router的数据结构恰恰就是完美的嵌套层次结构(树结构),同时vue文档中也提到了递归组件,基于这两点,我们来撸码,不过这次有所不同,我们选择使用render函数来实现,而不是在模板中递归。

数据结构:vue-router的数据结构

const routes = [
 {
 name: 'home',
 path: '/home',
 meta: { text: '首页' }
 },
 {
 name: 'inner',
 path: '/inner',
 meta: { text: '内部平台' },
 children: [
  {
  name: 'oa',
  path: 'oa',
  meta: { text: 'OA' }
  },
  {
  name: 'jira',
  path: 'jira',
  meta: { text: 'Jira' }
  },
  {
  name: 'wiki',
  path: 'wiki',
  meta: { text: 'Wiki' }
  },
  {
  name: 'caiwu',
  path: 'caiwu',
  meta: { text: '财务' },
  children: [
   {
   name: 'chailv',
   path: 'chailv',
   meta: { text: '差旅' }
   },
   {
   name: 'richang',
   path: 'richang',
   meta: { text: '日常' },
   children: [
    {
    name: 'taxi',
    path: 'taxi',
    meta: { text: '交通' }
    },
    {
    name: 'tel',
    path: 'tel',
    meta: { text: '通信' }
    }
   ]
   }
  ]
  }
 ]
 },
 {
 name: 'sec',
 path: '/sec',
 meta: { text: '审核' },
 children: [
  {
  name: 'acl',
  path: '/acl',
  meta: { text: 'ACL' }
  }
 ]
 }
]

组件实现:

先看看render函数,其中包含一个递归函数elements:

render (r) {
 return r(
  'el-menu',
  {
  props: {
   backgroundColor: "#545c64",
   textColor: "#fff",
   activeTextColor: "#ffd04b"
  },
  on: {
   select: this.onSelect
  }
  },
  this.elements(this.routes, r)
 )
 }

elements函数:

elements (routes, r) {
  return routes
  .map(route => {
   if (!route.paths) route.paths = []
   if (route.children && route.children.length) {
   return r(
    'el-submenu',
    {
    props: {
     index: route.name
    }
    },
    [
    r(
     'span',
     {
     slot: 'title'
     },
     [
     route.meta.text
     ]
    ),
    this.elements(route.children, r)
    ]
   )
   } else if (route.path) {
   return r(
    'el-menu-item',
    {
    props: {
     index: route.name
    }
    },
    [
    route.meta.text
    ]
   )
   } else {
   return null
   }
  })
  .filter(item => item)
 }

最终效果:

Vue递归实现树形菜单方法实例

完整代码示例请戳:https://codepen.io/360vislab/pen/GQqBve

总结:

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
JS焦点图切换,上下翻转
May 12 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
electron中使用bootstrap的示例代码
Nov 06 #Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 #Javascript
浅谈Vue数据响应思路之数组
Nov 06 #Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 #Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 #Javascript
微信小程序实现选项卡效果
Nov 06 #Javascript
Vue props 单向数据流的实现
Nov 06 #Javascript
You might like
php设置页面超时时间解决方法
2015/09/22 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
JavaScript 字符串连接性能优化
2008/12/20 Javascript
JAVASCRIPT keycode总结
2009/02/04 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
babel基本使用详解
2017/02/17 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
Python函数式编程
2017/07/20 Python
python最长回文串算法
2018/06/04 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
在PyCharm的 Terminal(终端)切换Python版本的方法
2019/08/02 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
详解python datetime模块
2020/08/17 Python
C#可否对内存进行直接的操作
2015/02/26 面试题
高中生活自我鉴定
2014/01/18 职场文书
双创工作实施方案
2014/03/26 职场文书
销售人员求职信
2014/07/22 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python