vue.js学习之递归组件

递归组件

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

实现最终效果图:

    

模拟数据格式如下

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的东西,下面就是在树形菜单基础上模仿出了树形表格,下图为完整图

总结

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

(0)

相关推荐

  • vue.js树形组件之删除双击增加分支实例代码

    html代码: <script type="text/x-template" id="item-template"> <li> <div :class="{bold: isFolder}" @click="toggle"> {{model.name}} <span v-if="isFolder">[{{open ? '-' : '+'}}]</span&

  • Vue.js 递归组件实现树形菜单(实例分享)

    最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = true import main from './components/main.vue' new Vue({ el: '#app', render: h => h(main) }) 它引入了一个组件 main.vue: <template> <div class="tree-m

  • Vue.js组件tree实现无限级树形菜单

    分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下. 代码看这里喽: html代码: <div class="tree"> <nav class='navbar'> <ul class='nav nav-stacked'> <template v-for='item in menus'> <li role='presentation' v-if='!item.c

  • Vue2组件tree实现无限级树形菜单

    一直打算偷懒使用个现成的树组件,但是在github上找了一大圈没有找到真正满足应用开发的树组件,所以没办法只能自己写了一个,开源出来希望可以帮助到需要的人,同时如果大家觉得好用,我可以顺带骗骗★(希望喜欢的朋友对我体力的肯定可以点下★ ),由于我也算刚接触vue,所以难免有所考虑不周的地方,希望大家在issue里面指正.组件重点是父子组件数据的共享和状态保持,我是利用了下vuex的思路,采用一个控制仓库完成. github 地址 vue-tree How to run demo npm inst

  • Vue2递归组件实现树形菜单

    今天看了老长时间递归组件,官方给的教程太简便了,根本看不出到底怎么用.于是自己查网摸索了一下,这儿只把核心思想写出来. 效果如下图,点击后打开二级菜单,再点击后打开三级. //js //引子 //思想:当v-if='false'时,循环时进行的.所以一开始就设置为false. ggg:{ name:'gs', template:` <div> <p @click.stop='show=!show'>我是p标签</p> //这儿show必须要初始值为false,不然就是堆

  • vue.js学习之递归组件

    递归组件 组件在它的模板内可以递归地调用自己,只有当它有 name 选项时才可以. 在官网这句话就是关键定义组件是一定要有name属性.按照这个思路我们开动吧. 实现最终效果图: 模拟数据格式如下: var data = [{ "id": "1", "data": { "menuName": "项目管理", "menuCode": "", }, "child

  • vue.js学习之UI组件开发教程

    本文主要给大家介绍了关于vue.js之UI组件开发的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 1. 新建组件: <script src="/public/javascripts/vue.js"></script> <style> #app1{background-color: red} #app2{background-color: blue} </style> <body> <div id=&quo

  • Vue.js学习笔记之 helloworld

    Vue.js 是用于构建交互式的 Web 界面的库. Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API. 先来看一个简单的示例,Hello,World! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue学习</title> <script src="/vue/1.0.11/vue.m

  • Vue.js下拉菜单组件使用方法详解

    本文实例为大家分享了Vue.js下拉菜单组件的具体实现代码,供大家参考,具体内容如下 效果 #### 入口页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

  • vue.js实现开关(switch)组件实例代码

    最近开发组件的时候,自定义开发了开关(switch)组件,现将代码整理如下,方便日后复用. toggle-switch.vue <template> <label role="checkbox" :class="['switch', { toggled }]"> <input type="checkbox" class="switch-input" @change="toggle&quo

  • vue.js学习笔记之绑定style样式和class列表

    数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }&q

  • vue.js 父向子组件传参的实例代码

    1.新建componentA.vue组件,代码如下: store.js代码如下: const STORAGE_KEY = 'todos-vue.js' export default{ fetch(){ return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') }, save(items){ window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items)); }

  • Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数, 代码如下: html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=

  • vue.js学习笔记之v-bind和v-on解析

    v-bind 指令用于响应地更新 HTML 特性 形式如:v-bind:href    缩写为    :href; v-on 指令用于监听DOM事件 形式如:v-on:click  缩写为 @click; <body> <div id="test"> <img v-bind:src="src"> <a v-bind:href="url" rel="external nofollow"

  • 使用vue.js在页面内组件监听scroll事件的方法

    思路:scroll在哪儿个组件内,就在获取那个dom元素.网上好多思路是 window.addEventListener("scroll", function(){ console.log('scrolling'); }); 这是监听不到的!如果你整个网页可以滑动,或许还可以试试! 对于像我这样,只在页面的内的一个div内要监听的. 实现代码如下: 第一步:滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素 <!--设备列表

随机推荐