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 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
js禁止小键盘输入数字功能代码
Aug 01 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
vue组件化中slot的基本使用方法
May 01 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多个字符串替换成同一个的解决方法
2013/06/18 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
Vue.js图片预览插件使用详解
2018/08/27 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
python如何支持并发方法详解
2020/07/25 Python
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
《四季》教学反思
2014/04/08 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android