vue封装树形组件

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

image.png

此树形结构分为三级：根节点，一级节点，二级节点，每个节点都可以选中或取消选中，父级节点选中，下级的所有节点也可全部选中。二级节点中有不可选中的节点
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页面

image.png

2.处理数据结构

image.png

image.png

3.选中子节点及父节点的方法

image.png

image.png

4.最终实现的效果

image.png