把可选择的el-tree中选中的节点单独用一个棵树显示解决方案

有时候我问自己，为什么我干的前端的跟别人干的不一样，人家都是写写h5页面啥的就好了，为什么我非得那么苦逼的魔改各种组件，产品就不能按照现有的组件库设计产品吗？唉，说多了都是泪。不过这个也能让我有一定提升，只是这个提升是时间的极度浪费来达到的，毕竟在已有组件上就行修改还是很难的，总归是受限的。不说了，直接进入正题 吧。先看个截图，一图胜千言！！！

左边是一个棵完整的树，右边是选中的节点组成的树。我做过很多系统，一般都是用一棵树就搞定了，毕竟左边的树上已经有选中和取消选中的操作了。无奈产品经历非得说在树很大的时候，不太容易看清哪些节点被选中了。说的也有道理，不过我觉得更多的是要维护他的面子，只要开发提的建议一律不听就对了，按照自己的想法做！！无可奈何！！

说一下我的思路吧。

1. 左右两棵树都用el-tree实现，我可不想自己徒手撸一棵树，我的脑细胞和头发都不允许我这么做
2. 右边树使用el-tree的插槽来自定义节点的显示
3. 右边树的数据根据树全量数据和选中节点生成（使用计算属性），选中节点从左边树的check事件中获取
4. 删除右边树中的节点时，相应的更新左边树，并且把选中节点修正成删除节点后的结果，这样计算属性会重新计算，根本不用我自己从右边树中删除节点

下面就上面的几点给出代码，最后我会给出一个完成demo

右边树使用插槽

<el-tree
          ref="rightTree"
          :props="props"
          :data="computedSelectedTreeData"
          :expand-on-click-node="false"
          node-key="id"
          default-exp