element UI 使用 el-tree 多次进行不同条件查询时，渲染不同dom节点时，缓存数据。（@check-change的小众使用方法）

功能要求

点击按钮后，弹框显示可勾选的人员，一级节点为班级，二级节点为班级内的人员。同时提供 条件搜索 ，搜索后显示符合条件的可勾选人员。勾选操作都是在一个弹框页面进行的，等用户 多次搜索选定所有人员 后，点击确定按钮，点击提交将数据传给后端。

第一次的分析思路（失败的逻辑）

可能大家的第一反应都是用el-tree自带的 check-change 或者 node-click 事件拿到每次操作以后的勾选数组，但是这里有个问题就是，我们此时只能拿到符合当前条件的节点数据，假如在此之前用户勾选过条件以外的人员，我们就拿不到了。

此时我又想，那我们把每次条件搜索的数据暂存，搜索状态一变化，我们就将这次条件搜索时勾选的所有人员插入缓存不就好了？
又有新问题来了，那假如我上次勾选了一班的王一一同学，存入了缓存，这次我条件搜索所有的姓王的同学，发现我勾错了呀，于是我取消了对王一一同学的勾选，但是因为我每次都是最后插入新勾选的新员，却没有对取消勾选的人员进行删除操作。所以我们要增加一个操作，判断每次勾选状态改变时，比较此次回传数组的长度与上次缓存数组的长度，若低于上次的长度，贼每次取消勾选时将人员从缓存里移除。

其实到这里我觉得大体思路已经成型了，所以第一次实现这个功能的时候我就用了该思路。但是写完以后看我自己的代码总觉得特别乱，逻辑混乱，不清晰，而且很容易产生各种不好维护的bug。
所以在第二次实现类似功能的时候，我选择了另外一种思路，放弃了 check-change 的总体返回，打算从【勾选】这个操作本身入手，进行缓存。

第二次的逻辑思路（可以直接看这里）

如果从勾选这个操作本身入手，我们就不需要去考虑 check-change 时返回的总体勾选数组了，我们只需要去考虑我们本次操作是 勾选 还是 取消勾选 就可以了，勾选就将这个人员加入缓存，取消勾选就将这个人员从缓存中删除。

这样的思路就简单清晰又好维护。

然后由于我要传给后端的 待授权人员id数组 是要由 所对应的班级id作为key值 的对象，最后传一个总的数组对象。如：

    [
      {
   '43574521': [001,002,...]}, // key值为班级id
      {
   '56744522': [034,056,...]}, // value值为该班级待授权的人员id
      ...
    ]

所以在判断该操作是勾选还是取消勾选之后，我还要判断是否为班级：

1. 班级勾选，该班级是否在缓存中存在，若不存在，则要将整个班级插入缓存，若存在，则将原班级部分人员的缓存直接替换为此次的整个班级缓存；
2. 班级取消勾选，我要删除整个班级的人员缓存；

若不是班级，而是人员的单独操作：

3. 人员勾选：该人员所在班级是否存在缓存，若存在，将人员插入本班级缓存，若不存在，先在缓存里创建该班级对象，然后将人员插入该班级对象里；
4. 人员取消勾选：循环检索到对应的班级对象，将该班级对象中的人员对象删除；

这时，我基本的操作逻辑就出来了，我个人感觉基本涵盖了所有可能性，且逻辑清晰有条理，简单易懂，容易维护。

虽然一开始我放弃了 check-change 的总体返回，看似是放弃了快捷简单的方法，但其实到最后发现，使用单独操作的状态响应来进行数据缓存反而更加方便简洁。

代码

1.html代码和一些属性解释

el-tree代码：

        <el-tree :props="studentsProps"
                 :data="studentsList"
                 node-key="id