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脚本性能优化注意事项
Nov 18 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
window.location.hash知识汇总
Nov 09 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
深入解析ES6中的promise
Nov 08 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
Vue实现点击箭头上下移动效果
Jun 11 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三层结构(上) 简单三层结构
2010/07/04 PHP
详解php的socket通信
2015/08/11 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
js实现动态时钟
2020/03/12 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
python如何在终端里面显示一张图片
2016/08/17 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
公司周年庆典邀请函
2014/01/12 职场文书
竞选村长演讲稿
2014/04/28 职场文书
读书活动总结
2014/04/28 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
旷课检讨书
2015/01/26 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
mysql死锁和分库分表问题详解
2021/04/16 MySQL
总结Python常用的魔法方法
2021/05/25 Python
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL