vue多级复杂列表展开/折叠，全选/分组全选实现

首先，来看下效果图

在线体验地址：https://hxkj.vip/demo/multipleList/。温馨提示，打开之后按F12，使用手机模式食用，口味更佳！

可以看出，这个列表有三种展现形式：

1.第一层级中包含直属子项和第二层级，其中第二层级里包含子项
2.第一层级中只包含第二层级，第二层级里包含子项
3.第一层级中只包含直属子项

接下来，再分析列表所实现的功能：

1.点击父级可以展开与折叠该直属子级；
2.点击父级级的勾选图标可以全选或取消该层级下列的所有子项；
3.点击子项达到该父级的全选状态时时，父级的勾选图标自动勾选；反之，没达到全选时，父级的勾选图标自动取消勾选；
4.所有相同层级之间勾选状态的改变互不影响；

分析完了，紧接着就到了撸码时刻了。

1.首先构建我们所需要的数据结构。

data() {
    return {
        headColor: ['#1c71fb', '#f7aa47', '#00c182', '#ff6769', '#917ee6', '#2cb2eb'],//待选颜色
        jobList: [{
            "id": "2511",
            "name": "嫩江第一中学",
            "member": [{
                "pid": "12058",
                "userName": "冷风",
                "job": "安全主任",
                "name": "冷风"
            }, {
                "pid": "12005",
                "userName": "周大龙",
                "job": "安全主任",
                "name": "大龙"
            }],
            "son": [{
                "id": "2513",
                "name": "校领导",
                "member": [{
                    "pid": "12056",
                    "userName": "凌凌",
                    "job": "安全主任",
                    "name": "凌凌"
                }, {
                    "pid": "12039",
                    "userName": "唐老师",
                    "job": "安全主任",
                    "name": "老师"
                }]
            }]
        }, {
            "id": "2510",
            "name": "黑龙江黑河市嫩江县教育局",
            "son": [{
                "id": "2525",
                "name": "办公室 ",
                "member": [{
                    "pid": "12006",
                    "userName": "张喵喵",
                    "job": "安全主任",
                    "name": "喵喵"
                }, {