vue.js学习之递归组件


Posted in Javascript onDecember 13, 2016

递归组件

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

实现最终效果图:

vue.js学习之递归组件

模拟数据格式如下

var data = [{
        "id": "1",
        "data": {
          "menuName": "项目管理",
          "menuCode": "",
        },
        "childTreeNode": [{
          "data": {
            "menuName": "项目",
            "menuCode": "BusProject",
          },
          "childTreeNode": []
        }, {
          "data": {
            "menuName": "我的任务",
            "menuCode": "BusProject",
          },
          "childTreeNode": []
        }, {
          "data": {
            "menuName": "人员周报",
            "menuCode": "BusProject",
          },
          "childTreeNode": []
        }]
      }, {
        "id": "2",
        "data": {
          "menuName": "数据统计",
          "menuCode": "BusClock",
        },
        "childTreeNode": []
      }, {
        "id": "3",
        "data": {
          "menuName": "人事管理",
          "menuCode": "",
        },
        "childTreeNode": []
      }, {
        "id": "4",
        "data": {
          "menuName": "基础管理",
          "menuCode": "",
        },
        "childTreeNode": []
      }]

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

<li>
  <div @click='toggle'>

     <i v-if='isFolder' class="fa " :class="[open?'fa-folder-open':'fa-folder']"></i>


 <!--isFolder判断是否存在子级改变图标-->
     <i v-if='!isFolder' class="fa fa-file-text"></i> {{model.data.menuName}}
   </div>
   <ul v-show="open" v-if='isFolder'>
     <items v-for='cel in model.childTreeNode' :model='cel'></items>
   </ul>
 </li>

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

export default {
  name: 'items',
  props: ['model'],
  components: {},
}

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

data() {
    return {
       open: false,
       isFolder: true
    }
}

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

computed: {
  isFolder() {
    return this.model.childTreeNode && this.model.childTreeNode.length
  }
}

显示隐藏事件

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

}
}

写到这里我们已经做完一个树形菜单了如下,最终样式就留给大家自己去实现了我在贴出完整代码供大家参考。

<template>
  <li>
    <div @click='toggle'>
      <i v-if='isFolder' class="fa " :class="[open?'fa-folder-open':'fa-folder']"></i>
      <!--isFolder判断是否存在子级改变图标-->
      <i v-if='!isFolder' class="fa fa-file-text"></i> {{model.data.menuName}}
    </div>
    <ul v-show="open" v-if='isFolder'>
      <items v-for='cel in model.childTreeNode' :model='cel'></items>
    </ul>
  </li>
</template>
<script type="text/javascript">
  export default {
    name: 'items',
    props: ['model'],
    components: {},
    data() {
      return {
        open: false,
        isFolder: true
      }
    },
    computed: {
      isFolder: function() {
        return this.model.childTreeNode && this.model.childTreeNode.length
      }
    },
    methods: {
      toggle: function() {
        if(this.isFolder) {
          this.open = !this.open
        }
      },
    }
  }
</script>

公司最开始是使用easyui做的管理系统,我接手后用vue完整模仿了一些easyui的东西,下面就是在树形菜单基础上模仿出了树形表格,下图为完整图

vue.js学习之递归组件 

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流

Javascript 相关文章推荐
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
解决vue移动端适配问题
Dec 12 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
AngularJS过滤器filter用法总结
Dec 13 #Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 #Javascript
AngularJS服务service用法总结
Dec 13 #Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 #Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 #Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 #Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 #Javascript
You might like
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
php include,include_once,require,require_once
2008/09/05 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
js 匿名调用实现代码
2009/06/19 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
用Python进行基础的函数式编程的教程
2015/03/31 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
python和php学习哪个更有发展
2020/06/17 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
个性大学生自我评价
2013/12/04 职场文书
高三英语教学反思
2014/01/13 职场文书
端午节演讲稿
2014/05/23 职场文书
五一促销活动总结
2014/07/01 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
心得体会格式及范文
2016/01/25 职场文书
vscode中使用npm安装babel的方法
2021/08/02 Javascript