欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue.js学习之递归组件

程序员文章站 2022-06-08 20:23:24
递归组件 组件在它的模板内可以递归地调用自己,只有当它有 name 选项时才可以。 在官网这句话就是关键定义组件是一定要有name属性。按照这个思路我们开动吧。 实...

递归组件

组件在它的模板内可以递归地调用自己,只有当它有 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学习之递归组件 

总结

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