基于Vue的一个树形全选与反选

文章先发布于我的个人博客站点上，戳这里

最近，由于公司后台管理系统重构，需要一个用到如图所示的一个功能：

项目使用的Vue和elementUI

一共有4级菜单，要实现全选和反选功能，当下级有一个被选中时，上级也要被选中；当下级全部未被选中时，上级也不能被选中。

网上搜了一圈也没有找到合适的，elementUI的tree组件虽然功能能实现，但是改样式又不方便，于是，只好自己撸一个了。。。。不写不知道自己有多菜！这个东西居然耗时一天。。

这个功能被抽离出来，做成了一个单独的组件。

下面记录下主要的代码：
后台返回的菜单数据格式

let menuData = [
    {
        "id": 1,
        "menName": "管理模式",
        "path": "manageMode",
        "businessCode": "manageMode",
        "parentId": 0,
        "isChecked": null,
        "menLevel": 1,
        "subMenuPermissionsVO": [
            {
                "id": 105,
                "menName": "首页",
                "path": "/index",
                "businessCode": "index",
                "parentId": 1,
                "isChecked": null,
                "menLevel": 2,
                "subMenuPermissionsVO": []
            },
            {
                "id": 106,
                "menName": "工作报表",
                "path": "/report",
                "businessCode": "report",
                "parentId": 1,
                "isChecked": null,
                "menLevel": 2,
                "subMenuPermissionsVO": [
                    {
                        "id": 107,
                        "menName": "数据总揽",
                        "path": "/reportOverView",
                        "businessCode": "reportOverView",
                        "parentId": 106,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": []
                    },
                    {
                        "id": 109,
                        "menName": "客服",
                        "path": "/reportService",
                        "businessCode": "客服",
                        "parentId": 106,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": [
                            {
                                "id": 110,
                                "menName": "工作报表",
                                "path": "/report-service-workreport",
                                "businessCode": "工作报表",
                                "parentId": 109,
                                "isChecked": null,
                                "menLevel": 4,
                                "subMenuPermissionsVO": []
                            },
                            {
                                "id": 111,
                                "menName": "工作质量报表",
                                "path": "/report-service-qualityreport",
                                "businessCode": "工作质量报表",
                                "parentId": 109,
                                "isChecked": null,
                                "menLevel": 4,
                                "subMenuPermissionsVO": []
                            }
                        ]
                    },
                    {
                        "id": 112,
                        "menName": "留言报表",
                        "path": "/reportLeaveWords",
                        "businessCode": "留言报表",
                        "parentId": 106,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": []
                    },
                    {
                        "id": 113,
                        "menName": "访问轨迹",
                        "path": "/reportWebsite",
                        "businessCode": "访问轨迹",
                        "parentId": 106,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": []
                    }
                ]
            },
            {
                "id": 114,
                "menName": "历史会话",
                "path": "/history",
                "businessCode": "历史会话",
                "parentId": 1,
                "isChecked": null,
                "menLevel": 2,
                "subMenuPermissionsVO": []
            },
            {
                "id": 115,
                "menName": "客服管理",
                "path": "/service",
                "businessCode": "客服管理",
                "parentId": 1,
                "isChecked": null,
                "menLevel": 2,
                "subMenuPermissionsVO": [
                    {
                        "id": 116,
                        "menName": "所有客服",
                        "path": "/service-all",
                        "businessCode": "所有客服",
                        "parentId": 115,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": []
                    },
                    {
                        "id": 117,
                        "menName": "角色设置",
                        "path": "/service-role-setting",
                        "businessCode": "角色设置",
                        "parentId": 115,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": []
                    }
                ]
            },
            {
                "id": 118,
                "menName": "企业账户",
                "path": "/business",
                "businessCode": "企业账户",
                "parentId": 1,
                "isChecked": null,
                "menLevel": 2,
                "subMenuPermissionsVO": [
                    {
                        "id": 119,
                        "menName": "团队信息",
                        "path": "/business-team",
                        "businessCode": "团队信息",
                        "parentId": 118,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": []
                    },
                    {
                        "id": 120,
                        "menName": "当前服务详情",
                        "path": "/business-service",
                        "businessCode": "当前服务详情",
                        "parentId": 118,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": []
                    },
                    {
                        "id": 121,
                        "menName": "团队联系人",
                        "path": "/business-contacts",
                        "businessCode": "团队联系人",
                        "parentId": 118,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": []
                    }
                ]
            },
            {
                "id": 122,
                "menName": "设置",
                "path": "/setting",
                "businessCode": "设置",
                "parentId": 1,
                "isChecked": null,
                "menLevel": 2,
                "subMenuPermissionsVO": [
                    {
                        "id": 123,
                        "menName": "系统设置",
                        "path": "/setting-system",
                        "businessCode": "系统设置",
                        "parentId": 122,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": [
                            {
                                "id": 124,
                                "menName": "个人信息",
                                "path": "/setting-userinfo",
                                "businessCode": "个人信息",
                                "parentId": 123,
                                "isChecked": null,
                                "menLevel": 4,
                                "subMenuPermissionsVO": []
                            },
                            {
                                "id": 125,
                                "menName": "修改密码",
                                "path": "/setting-change-pwd",
                                "businessCode": "修改密码",
                                "parentId": 123,
                                "isChecked": null,
                                "menLevel": 4,
                                "subMenuPermissionsVO": []
                            },
                            {
                                "id": 126,
                                "menName": "通知中心",
                                "path": "/setting-notice",
                                "businessCode": "通知中心",
                                "parentId": 123,
                                "isChecked": null,
                                "menLevel": 4,
                                "subMenuPermissionsVO": []
                            }
                        ]
                    },
                    {
                        "id": 127,
                        "menName": "在线服务",
                        "path": "/setting-online",
                        "businessCode": "在线服务",
                        "parentId": 122,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": [
                            {
                                "id": 128,
                                "menName": "基础设置",
                                "path": "/setting-online-base",
                                "businessCode": "基础设置",
                                "parentId": 127,
                                "isChecked": null,
                                "menLevel": 4,
                                "subMenuPermissionsVO": []
                            }
                        ]
                    },
                    {
                        "id": 129,
                        "menName": "接入设置",
                        "path": "/setting-join",
                        "businessCode": "接入设置",
                        "parentId": 122,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": [
                            {
                                "id": 130,
                                "menName": "网站接入",
                                "path": "/setting-join-website",
                                "businessCode": "网站接入",
                                "parentId": 129,
                                "isChecked": null,
                                "menLevel": 4,
                                "subMenuPermissionsVO": []
                            }
                        ]
                    },
                    {
                        "id": 131,
                        "menName": "高级设置",
                        "path": "/setting-advanced",
                        "businessCode": "高级设置",
                        "parentId": 122,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": [
                            {
                                "id": 132,
                                "menName": "短信服务",
                                "path": "/setting-advanced-msg",
                                "businessCode": "短信服务",
                                "parentId": 131,
                                "isChecked": null,
                                "menLevel": 4,
                                "subMenuPermissionsVO": []
                            },
                            {
                                "id": 133,
                                "menName": "二维码名片",
                                "path": "/setting-advanced-qrcode",
                                "businessCode": "二维码名片",
                                "parentId": 131,
                                "isChecked": null,
                                "menLevel": 4,
                                "subMenuPermissionsVO": []
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        "id": 2,
        "menName": "客服模式",
        "path": "customerMode",
        "businessCode": "customer",
        "parentId": 0,
        "isChecked": null,
        "menLevel": 1,
        "subMenuPermissionsVO": [
            {
                "id": 102,
                "menName": "留言",
                "path": "儿",
                "businessCode": "分隔符",
                "parentId": 2,
                "isChecked": null,
                "menLevel": 2,
                "subMenuPermissionsVO": [
                    {
                        "id": 103,
                        "menName": "小计成",
                        "path": "34",
                        "businessCode": "大幅度",
                        "parentId": 102,
                        "isChecked": null,
                        "menLevel": 3,
                        "subMenuPermissionsVO": [
                            {
                                "id": 104,
                                "menName": "76657",
                                "path": "76868",
                                "businessCode": "658568",
                                "parentId": 103,
                                "isChecked": null,
                                "menLevel": 4,
                                "subMenuPermissionsVO": []
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

父组件主要代码：

<tree-table :menuData="menuData" :level="1"></tree-table>

// 其中menuData为后台返回的数据，level为菜单层级，在menuData中有返回，这里主要是用来写样式用的。。

子组件组件代码（一个递归组件）：

子组件全部代码（说明都在代中有注释）：

<template>
  <ul class="tree-container" :class="'level'+level">
    <li class="" v-for="(item, Index) in menuData" :key="item.id" :class="'level'+item.menLevel">
      <div class="tree-node-title" :class="'level'+item.menLevel"><label>
        <input type="checkbox" @click.stop="nodeClick(item,Index)" name="menuSelected" :checked="item.isChecked == 1 ? true : false" :value="item.id">
        {{item.menName}}-level{{item.menLevel}}
      </label></div>
      <div class="tree-childnode-container " :class="'level'+item.menLevel">
        <CheckBox :menuData="item.subMenuPermissionsVO" :level="item.menLevel"></CheckBox>
      </div>
    </li>
  </ul>

</template>

<script>
  export default {
    name: 'CheckBox',
    props: ["menuData", "level"],
    data() {
      return {
        checkedVal:[]
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      nodeClick(node, index) {
      // 通过isChecked判断是否为选中状态：1-选中；0-未选中。这个字段是后端接口返回的
        if (node.isChecked == 1) {
          this.$set(node, "isChecked", 0)
        } else {
          this.$set(node, "isChecked", 1)
        }
        // 个人理解：组件每次递归调用会生成一个实例，this指向这个实例，这些实例相互独立的，所以每次的this都不一样，具体可以控制台打印看下。
        this.refreshAllParentNodes(this) // 设置父级状态
        this.refreshAllSonNodes(this.$children[index], node.isChecked);// 根据当前点击层级的状态设置自己所有子级的状态
      },
      refreshAllSonNodes(node, status) {

        if (node && node.$children.length) {
          node.menuData.map((meunItem, j) => {
            this.$set(meunItem, 'isChecked', status);
            this.refreshAllSonNodes(node.$children[j], status);
          })
        }
      },
      refreshAllParentNodes(node) {
        if (node) {
          var status = 0;
          var nullCount = 0;
          var fullCount = 0;

          if (node.menuData && node.$parent.menuData) {
            node.menuData.map((meunItem, j) => {
              if (typeof meunItem.isChecked == 'undefined') {
                nullCount++
              } else if (meunItem.isChecked == 0) {
                nullCount++
              } else if (meunItem.isChecked == 1) {
                fullCount++
              }
            })
            if (nullCount === node.$children.length) {
            // 该状态说明当前点击层级和兄弟层级都没选中，所以父级也是未选中状态
              status = 0;
            } else {
            //该状态说明当前点击层级和兄弟层级只要有一个选中，父级也是选中状态
              status = 1;
            }
            node.$parent.menuData.map(child => {
              node.menuData.map((meunItem, j) => {
                if (child.id == meunItem.parentId) {
                // 根据父级id和子级的parentId是否相等，来确定当前点击的层级的父级是哪一个
                  this.$set(child, 'isChecked', status);
                }
              })

            })
          }
          // 递归计算父级
          this.refreshAllParentNodes(node.$parent);
        }
      },
    }
  }
</script>

<style lang="scss">
  .tree-container {
    $borderColor: #ebeef5;
    width: 100%;
    padding: 0;

    &.level3 {
      display: flex;
      flex-wrap: wrap;

      & > .level4 {
        width: 25%;
        padding: 0 20px 0 40px;
      }
    }

    & > .level2 {
      display: flex;
      align-items: center;
      border: 1px solid $borderColor;
      line-height: 45px;

      .tree-node-title {
        &.level2 {
          width: 160px;
          text-align: center;
        }

      }
    }

    .level3 {
      .level3 + .level3 {
        border-top: 1px solid $borderColor;
      }
    }

    .tree-node-title {
      &.level3 {
        background-color: #f2f2f2;
        width: 100%;
        padding: 0 20px;
      }

      &.level1 {
        padding: 20px 0;
      }

    }

    .level2 + .level2 {
      border-top: none;
    }

    .tree-childnode-container {
      width: 100%;

      &.level2 {
        border-left: 1px solid $borderColor;
      }
    }

    input {
      margin-right: 5px;
    }

    label {
      cursor: pointer;
    }

  }
</style>

注意
在当前组件中使用组件本身（递归），注意图中圈出的地方，上面有两种写法