项目中我们遇到Tree组件的时候,默认的选中父节点的时候是相互关联的效果,如下图:
上图点击原子零件的时候下面的都会勾选中,但是,有的时候需要使得勾选父节点的时候不会影响到子节点,即勾选子节点的时候也要勾选上父节点给后台传过去
所以,这个时候就要用到antd中自带的属性 checkStrictly了如下所示:
打印出来的checkedKeys是一个包含checked和halfChecked两个属性的对象,如下图:
代码书写如下:
onCheck =(checkedKeys)=>{
this.setState({
checkedTest: checkedKeys.checked,
}
}
<Tree
checkable = {true}
onCheck={this.onCheck}
checkStrictly //就是这个属性
checkedKeys={this.state.checkedTest}
>
{this.renderList(treeData,treekey)}
</Tree>
注意:⚠️通过父子节点分离这种方法写出来的有一定的局限性,只是用于Tree结构比较少的情况,可以一个一个勾选,但是对于数结构庞大的json不适用这种方法,需要选子节点的时候自动给后台传过去父节点,我下一篇文章会介绍另一篇方法,别忘了关注一下呦~