Antd tree从多选改为单选
总结:
- children 结构 + checkedKeys受控
背景:Tree 可以开启多选模式 ‘multiple’,可以选择不同层级
需求:只能选择叶子节点
方案:根据当前数据结构中是否有 children + checkedKeys 受控
关键代码
// 单选 css
.checkbox {
:global {
.ant-tree-checkbox-inner {
border-radius: 50% !important;
}
}
}
// 通过逻辑实现单选
handleCheck = (_,e) => {
setCheckedKeys([e.node.key])
}