这篇主要是接上篇的遗留问题。
在你将[2,3]
这个数组提交给后端,那必然牵扯到回显的问题,回显的时候,使用了:
this.$nextTick(() => {
var checkedId = res.permissionIds // 后端返回res.permissionIds = [2,3]
this.$refs.menuTree.setCheckedKeys(checkedId) // 设置回显
})
然后你就发现了,由于后端返回的数组里有父级id
,所以根据el-tree的是否严格的遵循父子不互相关联(默认false)的原则
,它回显成了这样,子级整个全选:
然后根据他这个是否严格遵循父子级相互不关联的原则: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
不是半选中状态,而是一个对勾,不影响功能,而且在你点击其他菜单后也能恢复过来,就是回显后看着不美,有解决办法请赐教~