多选el-tree回显时只选中了父级下面其中一个子菜单，但是导致这个父级下面子菜单全选

不念不忘少年蓝@ 2022-12-05 12:25 409阅读 0赞

这篇主要是接[上篇的遗留问题][Link 1]。

--------------------

![在这里插入图片描述][20200910153518296.png_pic_center]  
在你将`[2,3]`这个数组提交给后端，那必然牵扯到回显的问题，回显的时候，使用了：

this.$nextTick(() => {
        var checkedId = res.permissionIds   // 后端返回res.permissionIds = [2,3]
        this.$refs.menuTree.setCheckedKeys(checkedId)    // 设置回显
    })

然后你就发现了，由于后端返回的数组里有`父级id`，所以根据`el-tree的是否严格的遵循父子不互相关联(默认false)的原则`，它回显成了这样，子级整个全选：  
![在这里插入图片描述][20200910153926237.png_pic_center]  
然后根据他这个`是否严格遵循父子级相互不关联的原则:check-strictly`来写一下，默认是相互关联的，那么在回显的时候将它设置为不关联，回显成功后再设置为关联：

this.checkStr = true   // 在回显的时候，设置不关联，那[2,3]只会选中父级和这个符合的子菜单
    this.$nextTick(() => {
        var checkedId = res.permissionIds   // 后端返回res.permissionIds = [2,3]
        this.$refs.menuTree.setCheckedKeys(checkedId)    // 设置回显
        this.checkStr = false    // 回显完成后，再次设置互相关联
    })

--------------------

到这里就解决了，然后你就发现这有一个小问题，就是父级菜单这样回显他的`checkbox`不是半选中状态，而是一个对勾，不影响功能，而且在你点击其他菜单后也能恢复过来，就是回显后看着不美，有解决办法请赐教~

[Link 1]: https://blog.csdn.net/huanhuan03/article/details/108514792
[20200910153518296.png_pic_center]: /images/20221123/9ab38b7636be4d63bfb3127c91065d52.png
[20200910153926237.png_pic_center]: /images/20221123/0636a01a1dbe491bb07fc393ec8e609d.png