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 live( type, fn ) 委派事件实现
Oct 11 Javascript
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
Js apply方法详解
Feb 16 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 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
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
详解ES6中的let命令
2020/04/05 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
python查看列的唯一值方法
2018/07/17 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
红色故事演讲稿
2014/05/22 职场文书
网站推广策划方案
2014/06/04 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
如何写好开幕词?
2019/06/24 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python