问题描述:
当父节点下子节点未全部选中时,父节点为全选状态:
原因分析:
首先新增或修改树节点时,通过getCheckedKeys()和getHalfCheckedKeys()拼接全选和半选状态的节点然后传给后台保存.
// 保存或修改方法
createData() {
var checkedKeys = this.$refs.tree
.getCheckedKeys()
.concat(this.$refs.tree.getHalfCheckedKeys())
var menusID = checkedKeys.map(id => ({ apiId: id }))
let para = {
roleId: this.itemKey.roleId,
roleName: this.itemKey.roleName,
menus: menusID
}
this.loading = true
roleAuthorize(para).then(res => {
this.loading = false
if (res.code == 0) {
this.$message({
message: res.message,
type: 'success'
})
this.CUFlag = false
this.$emit('searchl', para)
}
})
},
回显时查询勾选状态的后台接口也会把父节点和父节点下的子节点全部返回,所以setChecked()之后会出现父节点为全选,父节点下的子节点未全部选中的状态
// 回显方法
warractLst(item) {
this.itemKey = item
var menuList = item.menus
let that = this
setTimeout(function() {
menuList.forEach(value => {
that.$refs.tree.setChecked(value, true, false)
})
}, 100)
},
解决方案:
与后台协商,当父节点下子节点未全部选中时,查询勾选状态的后台接口只返回子节点数据,然后setChecked()之后,父节点自动变为半选状态。