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 相关文章推荐
Maps Javascript
Jan 22 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
Javascript中的变量使用说明
2010/05/18 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
数学专业毕业生自荐信
2013/11/10 职场文书
大学生职业生涯规划范文
2013/12/31 职场文书
小学教师事迹材料
2014/01/13 职场文书
给同学的道歉信
2014/01/16 职场文书
春节活动策划方案
2014/01/24 职场文书
保护环境建议书100字
2014/05/13 职场文书
初中同学会活动方案
2014/08/22 职场文书
师德师风自我评价范文
2014/09/11 职场文书
师范生见习报告范文
2014/11/03 职场文书
师德培训心得体会2016
2016/01/09 职场文书
2019广播稿怎么写
2019/04/17 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python