首页antd checkStrictly

antd checkStrictly

时间: 2025-04-28 20:39:35 浏览: 22

### antd `checkStrictly` 属性详解在 Ant Design (antd) 的 TreeSelect 和 Cascader 组件中，`checkStrictly` 是一个非常重要的属性。当设置为 `true` 时，父子节点的选择关系不再严格绑定在一起[^1]。 #### 使用场景对于树形结构数据而言，默认情况下父节点和子节点之间存在关联逻辑：即选中某个父节点会自动展开并选中其所有后代节点；反之取消勾选某一代中的任何一个节点都会导致整个分支被取消选择。而通过启用 `checkStrictly={true}` 参数可以打破这种默认行为，允许独立操作各个层次上的项目而不影响其他级别状态。 ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import { TreeSelect } from 'antd'; const treeData = [ { title: 'Node1', value: '0-0', children: [ { title: 'Child Node1', value: '0-0-0' } ] }, ]; ReactDOM.render( <React.StrictMode> <TreeSelect style={{ width: "100%" }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} placeholder="Please select" multiple checkable checkStrictly={true} // 启用该选项后，可以选择任意级别的节点而不必遵循严格的父子级联规则 treeDefaultExpandAll treeData={treeData} /> </React.StrictMode>, document.getElementById('root') ); ``` #### 解决问题实例有时开发者可能会遇到如下情况： - 需要单独控制某些特定层级下的条目； - 希望能够在不改变上层分类的情况下修改下一层的具体项； - 或者相反，在不影响具体项目的前提下调整个人大类的状态。此时就可以考虑利用 `checkStrictly=true` 来满足这些需求。不过需要注意的是，开启这个功能之后可能会影响原有业务流程的设计思路，因此建议先充分评估再做决定。

阅读全文