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 鼠标点击事件及其它捕获
Jun 04 Javascript
javascript 表单规则集合对象
Jul 21 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
理顺8个版本vue的区别(小结)
Sep 17 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
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伪造referer实例代码
2008/09/20 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
JQuery从头学起第三讲
2010/07/06 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
js实现搜索栏效果
2018/11/16 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
python使用cPickle模块序列化实例
2014/09/25 Python
Python绘制3D图形
2018/05/03 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
Django中的静态文件管理过程解析
2019/08/01 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
师范生实习的个人自我鉴定
2013/10/20 职场文书
大学生个人简历中的自我评价
2013/12/27 职场文书
球队口号
2014/06/18 职场文书
就业协议书样本
2014/08/20 职场文书
运动会广播稿100字
2014/09/14 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
Golang中interface{}转为数组的操作
2021/04/30 Golang
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis