vue.js学习之递归组件

站长资源 2024/11/28 佚名

51 1538 51

DDR爱好者之家 Design By 杰米

递归组件

组件在它的模板内可以递归地调用自己，只有当它有 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"></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"></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递归组件,vue2.0递归组件,vue.js组件

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“vue.js学习之递归组件”

暂无评论...

vue.js学习之递归组件

AngularJS中$apply方法和$watch方法用法总结

AngularJS过滤器filter用法总结

评论“vue.js学习之递归组件”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接