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 相关文章推荐
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
js仿京东放大镜效果
Aug 09 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
一些技巧性实用js代码小结
2009/10/14 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
Python工程师面试题 与Python Web相关
2016/01/14 Python
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
python psutil库安装教程
2018/03/19 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
广州某公司软件工程师面试题
2014/12/22 面试题
社区平安建设汇报材料
2014/08/14 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
普宁寺导游词
2015/02/04 职场文书
保研推荐信范文
2015/03/25 职场文书
股东大会通知
2015/04/24 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL