【前端】ant design中树形控件的父子节点受控实现

2023-11-01

前言:

1.ant design的树形控件里面先设置好checkStrictly属性,即checkable 状态下节点选择完全受控(父子节点选中状态不再关联),这样的话,onCheck函数中的checkedKeys参数打印出来它是一个有chekcedhalfChecked属性的对象,并且父子节点的选中与否不再关联;

onCheck=(checkedKeys,event)=>{
   console.log(checkedKeys,event)
}
// 打印的第一个是{checked:[],halfChecked:[]}
// evet.node.props.dataRef打印出来就是点击的节点的相关信息

// 目录树的数据结构如下
[
   {
    menuId:'1222',// 节点id
    menuName:'xxx',// 节点显示的名字
    pMenuId:'-1',// 父节点的id,没有父节点就为-1
    hasChild:true,// 是否有孩子节点
    authority:true,// 是否是选中状态
    children:[
     {
       menuId:'1452',
       menuName:'xxx',
       pMenuId:'1222',
       hasChild:false,
       authority:false
     }
    ]
   },
   ...
]

2.checked是一个数组,里面存放所有选中的树节点,halfChecked也是一个数组,里面存放的是关联子节点的父节点

需求:

1.点击父节点,对子节点没有影响,而取消父节点的选中状态,其所有的孩子节点都取消选中(checked:false),且提交的时候如果父节点是选中状态,必有一个孩子节点是选中状态(如果第一个孩子还有孩子,那么孩子的孩子也必须有一个选中状态,以此类推。。。)否则的话会弹出提示框;

2.点击子节点,如果其父节点下只有这一个子节点是选中状态,那么父节点也变为选中状态;取消选中子节点,同理如果其父节点下没有子节点是选中状态,父节点也取消选中状态。

实现:

1.在渲染TreeNode的时候传入一个path值,可以用来追根溯源,找到祖辈的节点id;

2.需要设置一个名为checkedNodes的state值,是一个对象形式,在初始化的时候需要遍历所有选中状态的节点,设置成如下形式:

{父节点1:[子节点1,子节点2,...],父节点2:[子节点1,子节点2,...]}

/**
   * 用来处理菜单授权的目录树默认选中的节点
   * 因为函数里面涉及到递归操作所以必须要在函数外定义初始变量
   * @param checkedKeys 存放选中状态的节
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【前端】ant design中树形控件的父子节点受控实现 的相关文章