el-tree里面的子父级涉及动态选中

  @1界面显示

 

@2vue源代码展示

 

@3vue输出代码展示

 

 

 

 

@4需求要点

     这里本人要实现的是el-tree在选中菜单节点的时候，当部分选择子节点的时候进行保存到后端需要带上父级节点的id，而el-tree里面默认是开启父级关联的选择模式，

     也就是el-tree官网里面的check-strictly这个属性，这个属性默认是false，表示选中父级的时候会默认选择所有的子级，取消父级的同时也会取消所有的子级菜单选项，

     部分选择子级的时候，父级呈现出一种半选择的状态，那么在保存到后端的时候父级菜单id是不会传入后端的，

     这里在后端可以使用菜单查询的查询方法手动将父级id塞入到数据库中。

 

 @4bug描述

    当完成菜单选中保存到后端的时候，重新打开的时候会发现，原来部分选择的菜单已不再是部分选中展示在菜单窗口中，而是全部帮你选中了，如下图展示：

  

 

  面对这种困境，本人尝试了多种办法进行解决都没有很好的效果，比如上面描述到的若是将check-strictly的属性设置为tree可以达到后端传入的部分选中效果，

  但是就失去了父子级只能选中和取消选中的效果，显然达不到用户最佳的体验效果，这是不符合需求的。

 

@5解决思路分析

  经过多次的尝试，参考官方el-tree的文档进行操作，发现了一个既可以保留父子级智能选中，又可以从后端传入的部分子级菜单+对应的父级菜单同时设置选中的办法。

   那就是如下代码：

   首先找出当前所有的菜单id，再比较后端传过来的菜单id，当后端传过来的id里不包含所有的菜单id中的id，那么就取消菜单选中，包括在父级菜单选中的时候也只是展示部分的子      级菜单。

 

总结：将父级菜单id传入后端的用处是用来设置动态的layout布局的左侧动态菜单，相信大家在动态的设置菜单项都会遇到这样的问题，所以这个方法完美的保全了el-tree该有的完美体验，当然还有别的方法解决，也可以通过后端的数据查询组合进行layout左侧菜单的加载，但是相比较这个方法来说比较复杂，需要自己组装数据，分享纯属个人学习心得，不喜勿喷，有更好的建议欢迎大家留言，一起学习，一起进步！！！