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,用于多选 。