Antd tree从多选改为单选

Posted by CodingWithAlice on May 15, 2025

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])
}