vue多级复杂列表展开多级复杂列表展开/折叠及全选折叠及全选/分组全选实现分组全选实现
主要介绍了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",
评论0