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 相关文章推荐
jQuery 位置插件
Dec 25 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
详解JavaScript树结构
Jan 09 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
vue实现短信验证码输入框
Apr 17 Javascript
Vue如何清空对象
Mar 03 Vue.js
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
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
php7 新增功能实例总结
2020/05/25 PHP
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
chrome调试javascript详解
2015/10/21 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
node.js实现快速截图
2016/08/27 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
中专自荐信
2013/10/13 职场文书
大专生简历的自我评价
2013/11/26 职场文书
团日活动策划书
2014/02/01 职场文书
婚礼主持结束词
2014/03/13 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
初中班主任心得体会
2016/01/07 职场文书
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技