当前位置：首页 > news >正文

antd-tree的半选回显，不联动父类节点，非严格模式下也可以

news 2025/3/19 11:25:33

出现的问题，树节点在非严格模式下，如果回显，会自动选中父节点以下的所有节点

在这里插入图片描述

方案1 在请求回来前设置 check-strictly 为true,请求完成后，设置为 false，没生效

方案2 在请求回来回显的接口时，取没有children的项，进行设置回显，在切换选中时，将半选的也设置上

 <a-treeref="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
}