vuejs--递归组件(树型表格分享)

前言

  　前段时间使用vue做了一套后台管理系统，其中使用最多就是递归组件，也因为自己对官方文档的不熟悉使得自己踩了不少坑，今天写出来和大家一起分享。

递归组件

  　组件在它的模板内可以递归地调用自己，只有当它有 name 选项时才可以。 在官网这句话就是关键定义组件是一定要有name属性。

模拟数据格式如下：

[
    {
      "id": "1",
      "menuName": "基础管理",
      "menuCode": "10",
      "children": [
        {
          "menuName": "用户管理",
          "menuCode": "11"
        },
        {
          "menuName": "角色管理",
          "menuCode": "12",
          "children": [
            {
              "menuName": "管理员",
              "menuCode": "121"
            },
            {
              "menuName": "CEO",
              "menuCode": "122"
            },
            {
              "menuName": "CFO",
              "menuCode": "123"
            },
            {
              "menuName": "COO",
              "menuCode": "124"
            },
            {
              "menuName": "普通人",
              "menuCode": "124"
            }
          ]
        },
        {
          "menuName": "权限管理",
          "menuCode": "13"
        }
      ]
    },
    {
      "id": "2",
      "menuName": "商品管理",
      "menuCode": ""
    },
    {
      "id": "3",
      "menuName": "订单管理",
      "menuCode": "30",
      "children": [
        {
          "menuName": "订单列表",
          "menuCode": "31"
        },
        {
          "menuName": "退货列表",
          "menuCode": "32",
          "children": []
        }
      ]
    },
    {
      "id": "4",
      "menuName": "商家管理",
      "menuCode": "",
      "children": []
    }
  ]

html我们思路按照ul里面套li，无限ul套li，标题用div元素包裹，

<template>
  <li>
    <span @click="toggle">      <!-- toggle:点击关闭展开 -->
      <i v-if="isFolder" class="icon" :class="[open ? 'folder-open' : 'folder']" @cilck="toggle"></i>
      <!-- <i v-if="isFolder" class="icon " :class="[open ? 'folder-open' : 'folder']"></i> -->
      <i v-if="!isFolder" class="icon folder-text"></i>
      {{model.menuName}}
    </span>
    <ul v-show="open" v-if="isFolder">
      <treeMenu v-for="item in model.children" :model="item"></treeMenu>
    </ul>
  </li>
</template>

官方文档里面写的递归组件强调了使用name属性

需要注意的是，由父组件传递过来的数据要先进行深拷贝哦
深拷贝：把props赋值到data里，赋值的同时深拷贝一下，data里 JSON.parse(JSON.stringify(这个值就行了))，data值自己命名

export default {
    name: 'treeMenu',
    //props: ['model'],  //这样和下面效果一样
    props: {
      model: { type: Object },
    },
    components: {},
}

按照vue的思想，不操作Dom树，我们定义两个变量，一个显示隐藏子菜单(open),一个存不存子菜单修改图标(isFolder)。

    data() {
      return {
        open: false, //一个显示隐藏子菜单(open)
        //isFolder: true    //这个不要写死，运用计算属性计算看存不存在
      }
    },

利用vue计算属性动态改变isFolder的值，修改图标，判断存在不子级和子级长度

    computed: {
      isFolder() { //利用vue计算属性动态改变isFolder的值，修改图标，判断存在不子级和子级长度
        // return this.model.children && this.model.children.length  //和下面效果一样
        let isFolder = false
        if (this.model.children && this.model.children.length) {
          isFolder = true;
        } else {
          isFolder = false;
        }
        return isFolder
      }
    },

显示隐藏事件

    methods: {
      toggle() {
        if (this.isFolder) {
          this.open = !this.open
        }
      }
    },

写到这里我们已经做完一个树形菜单了