Bootstrap

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

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

在这里插入图片描述

方案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就是最终选中的值,只是回显的时候,使用了另一个变量进行设置

在这里插入图片描述

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;