基于Vue的一个树形全选与反选

文章先发布于我的个人博客站点上，戳这里

最近，由于公司后台管理系统重构，需要一个用到如图所示的一个功能：

项目使用的Vue和elementUI

一共有4级菜单，要实现全选和反选功能，当下级有一个被选中时，上级也要被选中；当下级全部未被选中时，上级也不能被选中。

网上搜了一圈也没有找到合适的，elementUI的tree组件虽然功能能实现，但是改样式又不方便，于是，只好自己撸一个了。。。。不写不知道自己有多菜！这个东西居然耗时一天。。

这个功能被抽离出来，做成了一个单独的组件。

下面记录下主要的代码：
后台返回的菜单数据格式

let menuData = [
{
"id": 1,
"menName": "管理模式",
"path": "manageMode",
"businessCode": "manageMode",
"parentId": 0,
"isChecked": null,
"menLevel": 1,
"subMenuPermissionsVO": [
{
"id": 105,
"menName": "首页",
"path": "/index",
"businessCode": "index",
"parentId": 1,
"isChecked": null,
"menLevel": 2,
"subMenuPermissionsVO": []
},
{
"id": 106,
"menName": "工作报表",
"path": "/report",
"businessCode": "report",
"parentId": 1,
"isChecked": null,
"menLevel": 2,
"subMenuPermissionsVO": [
{
"id": 107,
"menName": "数据总揽",
"path": "/reportOverView",
"businessCode": "reportOverView",
"parentId": 106,
"isChecked": null,
"menLevel": 3,
"subMenuPermissionsVO": []
},
{
"id": 109,
"menName": "客服",
"path": "/reportService",
"businessCode": "客服",
"parentId": 106,
"isChecked": null,
"menLevel": 3,
"subMenuPermissionsVO": [
{
"id": 110,
"menName": "工作报表",
"path": "/report-service-workreport",
"businessCode": "工作报表",
"parentId": 109,
"isChecked": null,
"menLevel": 4,
"subMenuPermissionsVO": []
},
{
"id": 111,
"menName": "工作质量报表",
"path": "/report-service-qualityreport",
"businessCode": "工作质量报表",
"parentId": 109,
"isChecked": null,
"menLevel": 4,
"subMenuPermissionsVO": []
}
]
},
{
"id": 112,
"menName": "留言报表",
"path": "/reportLeaveWords",
"businessCode": "留言报表",
"parentId": 106,
"isChecked": null,
"menLevel": 3,
"subMenuPermissionsVO": []
},
{
"id": 113,
"menName": "访问轨迹",
"path": "/reportWebsite",
"businessCode": "访问轨迹",
"parentId": 106,
"isChecked": null,
"menLevel": 3,
"subMenuPermissionsVO": []
}
]
},
{
"id": 114,
"menName": "历史会话",
"path": "/history",
"businessCode": "历史会话",
"parentId": 1,
"isChecked": null,
"menLevel": 2,
"subMenuPermissionsVO": []
},
{
"id": 115,
"menName": "客服管理",
"path": "/service",
"businessCode": "客服管理",
"parentId": 1,
"isChecked": null,
"menLevel": 2,
"subMenuPermissionsVO": [
{
"id": 116,
"menName": "所有客服",
"path": "/service-all",
"businessCode": "所有客服",
"parentId": 115,
"isChecked": null,
"menLevel": 3,
"subMenuPermissionsVO": []
},
{
"id": 117,
"menName": "角色设置",
"path": "/service-role-setting",
"businessCode": "角色设置",
"parentId": 115,
"isChecked": null,
"menLevel": 3,
"subMenuPermissionsVO": []
}
]
},
{
"id": 118,
"menName": "企业账户",
"path": "/business",
"businessCode": "企业账户",
"parentId": 1,
"isChecked": null,
"menLevel": 2,
"subMenuPermissionsVO": [
{
"id": 119,
"menName": "团队信息",
"path": "/business-team",
"businessCode": "团队信息",
"parentId": 118,
"isChecked": null,
"menLevel": 3,
"subMenuPermissionsVO": []
},
{
"id": 120,
"menName": "当前服务详情",
"path": "/business-service",
"businessCode": "当前服务详情",
"parentId": 118,
"isChecked": null,
"menLevel": 3,
"subMenuPermissionsVO": []
},
{
"id": 121,
"menName": "团队联系人",
"path": "/business-contacts",
"businessCode": "团队联系人",
"parentId": 118,
"isChecked": null,
"menLevel": 3,
"subMenuPermissionsVO": []
}
]
},
{
"id": 122,
"menName": "设置",
"path": "/setting",
"businessCode": "设置",
"parentId": 1,
"isChecked": null,
"menLevel": 2,
"subMenuPermissionsVO": [
{
"id": 123,
"menName": "系统设置",
"path": "/setting-system",
"businessCode": "系统设置",
"parentId": 122,
"isChecked": null,
"menLevel": 3,
"subMenuPermissionsVO": [
{
"id": 124,
"menName": "个人信息",
"path": "/setting-userinfo",
"businessCode": "个人信息",
"parentId": 123,
"isChecked": null,
"menLevel": 4,
"subMenuPermissionsVO": []
},
{
"id": 125,
"menName": "修改密码",
"path": "/setting-change-pwd",
"businessCode": "修改密码",
"parentId": 123,
"isChecked": null,
"menLevel": 4,
"subMenuPermissionsVO": []
},
{
"id": 126,
"menName": "通知中心",
"path": "/setting-notice",
"businessCode": "通知中心",
"parentId": 123,
"isChecked": null,
"menLevel": 4,
"subMenuPermissionsVO": []
}
]
},
{
"id": 127,
"menName": "在线服务",
"path": "/setting-online",
"businessCode": "在线服务",
"parentId": 122,
"isChecked": null,
"menLevel": 3,
"subMenuPermissionsVO": [
{
"id": 128,
"menName": "基础设置",
"path": "/setting-online-base",
"businessCode": "基础设置",
"parentId": 127,
"isChecked": null,
"menLevel": 4,
"subMenuPermissionsVO": []
}
]
},
{
"id": 129,
"menName": "接入设置",
"path": "/setting-join",
"businessCode": "接入设置",
"parentId": 122,
"isChecked": null,
"menLevel": 3,
"subMenuPermissionsVO": [
{
"id": 130,
"menName": "网站接入",
"path": "/setting-join-website",
"businessCode": "网站接入",
"parentId": 129,
"isChecked": null,
"menLevel": 4,
"subMenuPermissionsVO": []
}
]
},
{
"id": 131,
"menName": "高级设置",
"path": "/setting-advanced",
"businessCode": "高级设置",
"parentId": 122,
"isChecked": null,
"menLevel": 3,
"subMenuPermissionsVO": [
{
"id": 132,
"menName": "短信服务",
"path": "/setting-advanced-msg",
"businessCode": "短信服务",
"parentId": 131,
"isChecked": null,
"menLevel": 4,
"subMenuPermissionsVO": []
},
{
"id": 133,
"menName": "二维码名片",
"path": "/setting-advanced-qrcode",
"businessCode": "二维码名片",
"parentId": 131,
"isChecked": null,
"menLevel": 4,
"subMenuPermissionsVO": []
}
]
}
]
}
]
},
{
"id": 2,
"menName": "客服模式",
"path": "customerMode",
"businessCode": "customer",
"parentId": 0,
"isChecked": null,
"menLevel": 1,
"subMenuPermissionsVO": [
{
"id": 102,
"menName": "留言",
"path": "儿",
"businessCode": "分隔符",
"parentId": 2,
"isChecked": null,
"menLevel": 2,
"subMenuPermissionsVO": [
{
"id": 103,
"menName": "小计成",
"path": "34",
"businessCode": "大幅度",
"parentId": 102,
"isChecked": null,
"menLevel": 3,
"subMenuPermissionsVO": [
{
"id": 104,
"menName": "76657",
"path": "76868",
"businessCode": "658568",
"parentId": 103,
"isChecked": null,
"menLevel": 4,
"subMenuPermissionsVO": []
}
]
}
]
}
]
}
]


父组件主要代码：



// 其中menuData为后台返回的数据，level为菜单层级，在menuData中有返回，这里主要是用来写样式用的。。


子组件组件代码（一个递归组件）：

子组件全部代码（说明都在代中有注释）：

注意
在当前组件中使用组件本身（递归），注意图中圈出的地方，上面有两种写法