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

最新推荐文章于 2025-04-12 20:36:51 发布

diyanzong6528

最新推荐文章于 2025-04-12 20:36:51 发布

阅读量1.8k

点赞数 1

文章标签： javascript 数据结构与算法前端 ViewUI

原文链接：http://www.cnblogs.com/hashtang/p/11456114.html

版权

本文介绍了如何在Vue中实现一个具有多级展开、折叠和全选功能的复杂列表。文章详细讲解了数据结构的设计、初始化数据、事件绑定以及通过子级状态改变父级选中状态的逻辑。提供了在线体验链接和GitHub项目源码，供读者深入理解和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，来看下效果图

效果图.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": "办公室 ",
                "member": [{
                    "pid": "12006",
                    "userName": "张喵喵",
                    "job": "安全主任",
                    "name": "喵喵"
                }