Vue递归实现树形菜单方法实例

 更新时间:2018-11-06 15:00:45   作者:佚名   我要评论(0)

什么是树形菜单还是要简单的啰嗦一下,比如:



上图是截图自elementui的实例,实现方式是用文档结构(类似像原生Dom文档结构的写法)的方式,好处就是很灵

什么是树形菜单还是要简单的啰嗦一下,比如:


上图是截图自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)
 }

最终效果:


完整代码示例请戳:https://codepen.io/360vislab/pen/GQqBve

总结:

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

  • Vue.js 递归组件实现树形菜单(实例分享)
  • vuejs使用递归组件实现树形目录的方法
  • 用 Vue.js 递归组件实现可折叠的树形菜单(demo)
  • Vue2递归组件实现树形菜单
  • Vue.js递归组件构建树形菜单
  • vue左侧菜单,树形图递归实现代码
  • vue用递归组件写树形控件的实例代码

相关文章

  • Vue递归实现树形菜单方法实例

    Vue递归实现树形菜单方法实例

    什么是树形菜单还是要简单的啰嗦一下,比如: 上图是截图自elementui的实例,实现方式是用文档结构(类似像原生Dom文档结构的写法)的方式,好处就是很灵
    2018-11-06
  • Vue常用的几个指令附完整案例

    Vue常用的几个指令附完整案例

    越来越多的人在用Vue,刚开始接触vue的话常接触的指令就几个,统一归纳一下,做个demo演示。 指令 v-text v-html v-bind v-on v-model v-for 代
    2018-11-06
  • 微信小程序自定义tabBar组件开发详解

    微信小程序自定义tabBar组件开发详解

    本文实例为大家分享了微信小程序自定义tabBar组件的具体代码,供大家参考,具体内容如下 以下代码保存在github地址 先看一看目录 template文件夹里存放tabb
    2018-11-06
  • 易语言截取当前窗口图片功能

    易语言截取当前窗口图片功能

    快照命令 英文命令:GetWinPic 操作系统支持:Windows 所属类别:系统处理 为高级用户提供,初级用户无需掌握; 捕获指定窗口或屏幕上所有现有显示内容,返回
    2018-11-06
  • 利用JavaScript缓存远程窃取Wi-Fi密码的思路详解

    利用JavaScript缓存远程窃取Wi-Fi密码的思路详解

    我一直想在这个小项目上花一些时间做一些研究,但是由于生活所迫让我总是一直繁忙。现在我终于可以抽出一些时间了继续研究这种攻击技术了,我将在本文中阐
    2018-11-05
  • windows10系统安装mysql-8.0.13(zip安装) 的教程详解

    windows10系统安装mysql-8.0.13(zip安装) 的教程详解

    安装环境说明 •系统版本:windows10 •mysql版本:mysql-8.0.13-winx64.zip •下载地址:http://mirrors.163.com/mysql/Downloads/MySQL
    2018-11-05
  • 易语言获取当前是几月份的方法

    易语言获取当前是几月份的方法

    这个功能要用到以下几个命令: 到时间命令 取现行时间命令 取月份命令 例程 说明 首先将编辑框中输入的时间转换成日期时间型的数据,然后用“取月份
    2018-11-05
  • Centos7 安装mysql 8.0.13(rpm)的教程详解

    Centos7 安装mysql 8.0.13(rpm)的教程详解

    yum or rpm? yum安装方式很方便,但是下载mysql的时候从官网下载,速度较慢。 rpm安装方式可以从国内镜像下载mysql的rpm包,比较快。rpm也适合离线安装。 环
    2018-11-05
  • c#和java base64不一致的解决方法

    c#和java base64不一致的解决方法

    本文主要介绍了关于c#和java base64不一致的解决方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 不一致的问题不是编码的问题 而是j
    2018-11-05
  • 易语言将十进制数值转换为八进制文本的方法

    易语言将十进制数值转换为八进制文本的方法

    取八进制文本命令 英文命令:oct 操作系统支持:Windows、Linux 所属类别:数值转换 返回一个文本,代表指定数值的八进制形式。 语法: 文本型 取八进制
    2018-11-05

最新评论