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 相关文章推荐
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
分类解析jQuery选择器
Nov 23 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
简单实现js放大镜效果
Jul 24 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
js实现详情页放大镜效果
Oct 28 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二维数组转成字符串示例
2014/02/17 PHP
php绘制一个扇形的方法
2015/01/24 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
php判断访问IP的方法
2015/06/19 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
[JS]点出统计器
2020/10/11 Javascript
Javascript的一种模块模式
2008/03/22 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
python写入xml文件的方法
2015/05/08 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
广告创意求职信
2014/03/17 职场文书
小学评语大全
2014/04/22 职场文书
建筑安全责任书范本
2014/07/24 职场文书
中队活动总结
2014/08/27 职场文书
付款承诺函范文
2015/01/21 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
Mysql 文件配置解析介绍
2022/05/06 MySQL
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技