layui树形父子不关联_[antd] Tree 组件实现父子节点分离 (父子节点不相互关联)

[antd] Tree 组件实现父子节点分离 (父子节点不相互关联)

项目中我们遇到 Tree 组件的时候, 默认的选中父节点的时候是相互关联的效果, 如下图:

屏幕快照 2019-08-05 下午 4.59.37.PNG

上图点击原子零件的时候下面的都会勾选中, 但是, 有的时候需要使得勾选父节点的时候不会影响到子节点, 即勾选子节点的时候也要勾选上父节点给后台传过去

WeChat2cee7be826074dbfe46c5d3a1a09c93a.PNG

所以, 这个时候就要用到 antd 中自带的属性 checkStrictly 了如下所示:

屏幕快照 2019-08-05 下午 5.05.52.PNG

打印出来的 checkedKeys 是一个包含 checked 和 halfChecked 两个属性的对象, 如下图:

屏幕快照 2019-08-05 下午 5.08.03.PNG

代码书写如下:onCheck=(checkedKeys)=>{

this.setState({

checkedTest:checkedKeys.checked,

}

}

checkable={true}

onCheck={this.onCheck}

checkStrictly// 就是这个属性

checkedKeys={this.state.checkedTest}

>

{this.renderList(treeData,treekey)}

注意:通过父子节点分离这种方法写出来的有一定的局限性, 只是用于 Tree 结构比较少的情况, 可以一个一个勾选, 但是对于数结构庞大的 JSON 不适用这种方法, 需要选子节点的时候自动给后台传过去父节点, 我下一篇文章会介绍另一篇方法, 别忘了关注一下呦～

来源: http://www.jianshu.com/p/e780129f4e94