CheckTree 树形多选控件
<CheckTree> 用于展示一个树结构数据,同时支持 Checkbox 选择。
获取组件
import { CheckTree } from 'rsuite';演示
默认
级联选择
cascade 属性可以设置 CheckTree 在选择的时候是否可考虑子父级的级联关系,默认为 true。
自定义选项
虚拟列表
Props
<CheckTree>
| 属性名称 | 类型 (默认值) |
描述 |
|---|---|---|
| cascade | boolean (true) |
checktree 是否级联选择 |
| childKey | string ('children') |
tree 数据结构 children 属性名称 |
| data * | Array<DataItemType> | tree 数据 |
| defaultExpandAll | boolean | 默认展开所有节点 |
| defaultValue | string[] | 默认选中的值 |
| disabledItemValues | string[] | 禁用节点列表 |
| defaultExpandItemValues | any [] | 设置默认展开节点的值 |
| expandItemValues | any [] | 设置展开节点的值(受控) |
| height | number (360px) |
menu 的高度。当设置了 virtualized 为 true 时, 可以通过 height 控制 menu 的高度 |
| labelKey | string ('label') |
tree 数据结构 label 属性名称 |
| onChange | (values:string[]) => void | 数据改变的回调函数 |
| onExpand | (expandItemValues: any [], activeNode:DataItemType, concat:(data, children) => Array) => void | 树节点展示时的回调 |
| onSelect | (activeNode:DataItemType,value:any, event) => void | 选择树节点后的回调函数 |
| renderTreeIcon | (nodeData:DataItemType) => React.Node | 自定义渲染 图标 |
| renderTreeNode | (nodeData:DataItemType) => React.Node | 自定义渲染 tree 节点 |
| searchKeyword | string | 搜索关键词(受控) |
| uncheckableItemValues | string[] | 设置不显示复选框的选项值 |
| value | string[] | 当前选中的值 |
| valueKey | string ('value') |
tree 数据结构 value 属性名称 |
| virtualized | boolean (false) |
是否开启虚拟列表 |
相关组件
<Tree>用于展示一个树结构数据。<TreePicker>选择器组件,树形单项选择器。<CheckTreePicker>选择器组件,在 TreePicker 节点上支持 Checkbox,用于多选 。