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

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

主要介绍了vue多级复杂列表展开/折叠及全选/分组全选实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

首先，来看下效果图

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

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

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

2.第一层级中只包含第二层级，第二层级里包含子项

3.第一层级中只包含直属子项

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

data() {

return {

headColor: ['#1c71fb', '#f7aa47', '#00c182', '#ff6769', '#917ee6', '#2cb2eb'],//待选颜色

jobList: [{

"id": "2511",

"name": "嫩江第一中学",

"member": [{

"pid": "12058",

"userName": "冷风",

"name": "大龙"

}],

"son": [{

"id": "2513",

"name": "校领导",

"member": [{

"pid": "12056",

"userName": "凌凌",

"job": "安全主任",

"name": "凌凌"

}]

}, {

"id": "2510",