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 option location 页面跳转实现代码
Dec 27 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
javascript数组去重方法分析
Dec 15 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
深入理解Antd-Select组件的用法
Feb 25 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
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
php判断表是否存在的方法
2015/06/18 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
单链表反转python实现代码示例
2018/02/08 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
python 写一个性能测试工具(一)
2020/10/24 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
幼儿园母亲节活动方案
2014/03/10 职场文书
工伤赔偿协议书
2014/04/15 职场文书
同居协议书范本
2014/04/23 职场文书
工厂车间标语
2014/06/19 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
新闻稿怎么写
2015/07/18 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS