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 相关文章推荐
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
Js冒泡事件详解及阻止示例
Mar 21 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
vue-test-utils初使用详解
May 23 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 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
很实用的一个完整email发送程序
2006/10/09 PHP
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
JavaScript中的私有成员
2006/09/18 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
Vue.js tab实现选项卡切换
2017/05/16 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
使用Python对微信好友进行数据分析
2018/06/27 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
pandas 对group进行聚合的例子
2019/12/27 Python
Python类继承和多态原理解析
2020/02/05 Python
pytorch进行上采样的种类实例
2020/02/18 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
父母对孩子的寄语
2014/04/09 职场文书
领导参观欢迎词
2015/01/26 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python