vuejs实现递归树型菜单组件


Posted in Javascript onJanuary 13, 2018

前言

前段时间使用vue做了一套后台管理系统,其中使用最多就是递归组件,也因为自己对官方文档的不熟悉使得自己踩了不少坑,今天写出来和大家一起分享。

递归组件

组件在它的模板内可以递归地调用自己,只有当它有 name 选项时才可以。 在官网这句话就是关键定义组件是一定要有name属性。

模拟数据格式如下:

[
  {
   "id": "1",
   "menuName": "基础管理",
   "menuCode": "10",
   "children": [
    {
     "menuName": "用户管理",
     "menuCode": "11"
    },
    {
     "menuName": "角色管理",
     "menuCode": "12",
     "children": [
      {
       "menuName": "管理员",
       "menuCode": "121"
      },
      {
       "menuName": "CEO",
       "menuCode": "122"
      },
      {
       "menuName": "CFO",
       "menuCode": "123"
      },
      {
       "menuName": "COO",
       "menuCode": "124"
      },
      {
       "menuName": "普通人",
       "menuCode": "124"
      }
     ]
    },
    {
     "menuName": "权限管理",
     "menuCode": "13"
    }
   ]
  },
  {
   "id": "2",
   "menuName": "商品管理",
   "menuCode": ""
  },
  {
   "id": "3",
   "menuName": "订单管理",
   "menuCode": "30",
   "children": [
    {
     "menuName": "订单列表",
     "menuCode": "31"
    },
    {
     "menuName": "退货列表",
     "menuCode": "32",
     "children": []
    }
   ]
  },
  {
   "id": "4",
   "menuName": "商家管理",
   "menuCode": "",
   "children": []
  }
 ]

html我们思路按照ul里面套li,无限ul套li,标题用div元素包裹,

<template>
 <li>
  <span @click="toggle">   <!-- toggle:点击关闭展开 -->
   <i v-if="isFolder" class="icon" :class="[open ? 'folder-open' : 'folder']" @cilck="toggle"></i>
   <!-- <i v-if="isFolder" class="icon " :class="[open ? 'folder-open' : 'folder']"></i> -->
   <i v-if="!isFolder" class="icon folder-text"></i>
   {{model.menuName}}
  </span>
  <ul v-show="open" v-if="isFolder">
   <treeMenu v-for="item in model.children" :model="item"></treeMenu>
  </ul>
 </li>
</template>

官方文档里面写的递归组件强调了使用name属性

需要注意的是,由父组件传递过来的数据要先进行深拷贝哦

深拷贝:把props赋值到data里,赋值的同时深拷贝一下,data里 JSON.parse(JSON.stringify(这个值就行了)),data值自己命名

export default {
  name: 'treeMenu',
  //props: ['model'], //这样和下面效果一样
  props: {
   model: { type: Object },
  },
  components: {},
}

按照vue的思想,不操作Dom树,我们定义两个变量,一个显示隐藏子菜单(open),一个存不存子菜单修改图标(isFolder)。

data() {
   return {
    open: false, //一个显示隐藏子菜单(open)
    //isFolder: true  //这个不要写死,运用计算属性计算看存不存在
   }
  },

利用vue计算属性动态改变isFolder的值,修改图标,判断存在不子级和子级长度

computed: {
   isFolder() { //利用vue计算属性动态改变isFolder的值,修改图标,判断存在不子级和子级长度
    // return this.model.children && this.model.children.length //和下面效果一样
    let isFolder = false
    if (this.model.children && this.model.children.length) {
     isFolder = true;
    } else {
     isFolder = false;
    }
    return isFolder
   }
  },

显示隐藏事件

methods: {
   toggle() {
    if (this.isFolder) {
     this.open = !this.open
    }
   }
  },

写到这里我们已经做完一个树形菜单了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
理解JSON:3分钟课程
Oct 28 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
关于AOP在JS中的实现与应用详解
May 06 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 #Javascript
详解基于vue-cli配置移动端自适应
Jan 13 #Javascript
javascript用rem来做响应式开发
Jan 13 #Javascript
深入理解ES6之数据解构的用法
Jan 13 #Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 #Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 #Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 #Javascript
You might like
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
php共享内存段示例分享
2014/01/20 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
清空上传控件input file的值
2010/07/03 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
vue组件实例解析
2017/01/10 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
Python读写Excel文件的实例
2013/11/01 Python
Sublime开发python程序的示例代码
2018/01/24 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
Python制作词云图代码实例
2019/09/09 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
实习生自荐信范文
2013/11/13 职场文书
高级技校毕业生自荐信
2013/11/18 职场文书
工厂厂长的职责
2013/12/12 职场文书
办公室经理岗位职责
2014/01/01 职场文书
初中化学教学反思
2014/01/23 职场文书
个人自我剖析材料
2014/02/07 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
努力工作保证书
2015/02/28 职场文书
个人自荐书怎么写
2015/03/26 职场文书
病房管理制度范本
2015/08/06 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技