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

首先，来看下效果图

效果图.gif

在线体验地址：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": "办公室