出现的问题,树节点在非严格模式下,如果回显,会自动选中父节点以下的所有节点
方案1 在请求回来前设置 check-strictly 为true,请求完成后,设置为 false,没生效
方案2 在请求回来回显的接口时,取没有children的项,进行设置回显,在切换选中时,将半选的也设置上
<a-tree
ref="aTreeRef"
v-model:checkedKeys="checkedKeys"
default-expand-all
checkable
:field-names="fieldNames"
:tree-data="treeData"
@check="onCheck"
/>
回显
function findRoleMenuByRoleIdFn() {
findRoleMenuByRoleId({
roleId: props.editRoleObj.roleId,
}).then((res: any) => {
if (res.code === '0000') {
checkedKeys.value = getOnlychildrenIds(res.data, [])
menuIds.value = getAllAllIds(res.data, [])
}
})
}
// 半选的情况下,也传父节点
function onCheck(_keys: any, e: any) {
const arr = _keys.concat(e.halfCheckedKeys)
menuIds.value = [...arr]
};
function getAllAllIds(tree: any, result: any = []) {
// 遍历树 获取id数组
for (const i in tree) {
result.push(tree[i].menuId) // 遍历项目满足条件后的操作
if (tree[i].children) {
// 存在子节点就递归
getAllAllIds(tree[i].children, result)
}
}
return result
}
// 回显的时候,默认值只取子项的id
function getOnlychildrenIds(tree: any, result: any = []) {
// 遍历树 获取id数组
for (const i in tree) {
if (tree[i].children.length <= 0) {
console.log(tree[i].menuId)
result.push(tree[i].menuId) // 遍历项目满足条件后的操作
}
else {
getOnlychildrenIds(tree[i].children, result)
}
}
return result
}
取到的 menuIds就是最终选中的值,只是回显的时候,使用了另一个变量进行设置