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 相关文章推荐
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 Javascript
javascript实现超好看的3D烟花特效
Jan 01 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入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
php数组键名技巧小结
2015/02/17 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
Python当中的array数组对象实例详解
2019/06/12 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
Python和Sublime整合过程图示
2019/12/25 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
基于python 取余问题(%)详解
2020/06/03 Python
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
Order by的几种用法
2013/06/16 面试题
119消防日活动总结
2014/08/29 职场文书
爱护公物演讲稿
2014/09/09 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
2015年清明节活动总结
2015/02/09 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书