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 01 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
vue - vue.config.js中devServer配置方式
Oct 30 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
php microtime获取浮点的时间戳
2010/02/21 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
vue操作dom元素的3种方法示例
2020/09/20 Javascript
Python正则表达式使用经典实例
2016/06/21 Python
200行自定义python异步非阻塞Web框架
2017/03/15 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
python检索特定内容的文本文件实例
2018/06/05 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
python识别验证码图片实例详解
2020/02/17 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
迎接领导欢迎词
2014/01/11 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
小学感恩节活动总结
2015/03/24 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技