el-tree：实现父节点自动关联选中、子节点自动关联取消选中功能

element plus的Tree 树形控件提供了一种显示层级关系记录的可视化方案，比如权限记录、组织架构记录等，大大优化了数据显示效果、提升客户感知度。但原生的Tree控件却存在一些不足，如关联操作。比如现在要达到这样的效果：

1. 某个节点被选中时，上层各级父节点要关联选中；
2. 某个节点被取消选中时，如果存在子节点且有子节点处于选中状态，则下级各层子节点要关联取消选中；
3. 某个节点被取消选中时，如果存在父节点且有父节点处于选中状态，则保持原状态不变，不会因为下级子节点全部处于取消选中状态而被系统自动取消选中。

这种需求并不是凭空捏造出来的，而是实实在在的实际需求。比如在前后端分离的项目中，利用动态路由机制为每一位登录用户动态创建导航目录和菜单信息，这些都是权限控制的对象。

我们知道，在动态路由加载机制的加持下，目录、菜单和按钮都是由后台权限机制控制的。能够显示那些目录、每个目录下能够显示哪些菜单访问相应的页面，以及每个页面中能够执行怎样的操作，全都由后台维护，前端不再进行硬编码，有后台提供的权限树列表进行数据渲染。

此时就会出现一个问题，当给角色授权时，如果子节点被选中，而上层各级父节点没有自动关联选中，保存之后就会出现得到了操作权限却看不见操作页面的尴尬。于是还得手动逐级向上一个一个的将父节点全都给手动选择上，这显然太不智能了。反过来说，当节点被取消选中后，各级子节点一并同步取消选中的同时，上层各级父节点不应因为下级子节点全部处于取消选中状态而被系统自动取消选中。这个操作的实际意义就是，允许你访问页面，但不允许进行任何操作。比如，有些场景下，普通用户可以访问用户管理页面，但只能看到自己的用户记录，因此不需要给用户授权类似查询、新建、删除等操作权限。此时，页面访问权限作为父节点，在页面内的增、删、改、查操作权限全部被置空的情况下，不应被取消。

可能有人会说，Tree控件提供了一个属性：check-strictly，默认设置false，就会是上面所说的情况，可以置将其为false，就自动执行父子关联了。大家可以尝试一下，一旦置为fals，当节点存在子节点且所有子节点全部置空的情况下，父节点也自动取消选中了。这显然没有达到我们要的效果。这个逻辑看起来很简单，实现起来还是有些技巧的，所以说光靠控件提供的方法和属性，显然已经达不到想要的效果，只能动手自己干。

首先要明确目标：

1. 进行角色权限配置时，显示权限树，并将角色绑定权限对应的复选框置为选中状态；
2. 选中节点时，该节点上层各级父节点同步关联选中；
3. 取消节点选中时，该节点下层各级子节点同步关联取消选中；
4. 取消节点选中时，该节点上层各级父节点保持原状态不变。

目标1和2实现起来不难，check-strictly置为false，不要进行父子关联，再将选中项的id添加到default-checked-keys中，然后按照正常的步骤就可以实现。但这里我们打算自己写个方法，在check-strictly置为true，也就是关闭父子节点关联的情况下，一次性实现所有目标。接下来看具体的做法。

在Tree控件中，绑定check事件，从事件中可以得到两个参数：当前被操作节点对象和当前处于选中状态的对象的集合（包括全选中和半选中状态的对象）。而第二个参数又包含checkedNodes、checkedKeys、halfCheckedNodes和halfCheckedKeys四个属性，分别对应了全选节点对象集合、全选节点Key属性集合、半选节点对象集合和半选节点Key属性集合。当check-strictly参数设置成true时，后两个属性没有意义。于是就得到了两个关键信息，当前被操作节点对象和全选节点Key属性集合，后者也就是当前所有被选中节点的ID集合。