vue封装树形组件

Posted 2023-03-17

参考技术A 最近在做一个vue的项目，独立封装树形组件。
先说一下项目需求：
1.项目原型：

此树形结构分为三级：根节点，一级节点，二级节点，每个节点都可以选中或取消选中，父级节点选中，下级的所有节点也可全部选中。二级节点中有不可选中的节点
2.后台返回的数据结构：
this.menuList = [id:1,menuName:'首页',type:1,parentId:0,
id:2,menuName:'首页1',type:0,parentId:1,
id:3,menuName:'首页2',type:0,parentId:1,
id:5,menuName:'首页3',type:1,parentId:1,
id:6,menuName:'报告看板',type:1,parentId:0,
id:7,menuName:'看板1',type:2,parentId:6,
id:8,menuName:'看板2',type:2,parentId:6,
id:9,menuName:'数据中心',type:1,parentId:0,
id:10,menuName:'数据中心1',type:1,parentId:9,
id:10,menuName:'数据中心2',type:2,parentId:9];
其中parentId为0 的为父节点，1为可以选择的子节点，2为已经选中的子节点
根节点为前端写死的节点
3.html页面

4.最终实现的效果