You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

5.2 KiB

category type title
Components Data Entry TreeSelect

Tree selection control.

When To Use

TreeSelect is similar to Select, but the values are provided in a tree like structure. Any data whose entries are defined in a hierarchical manner is fit to use this control. Examples of such case may include a corporate hierarchy, a directory structure, and so on.

API

Tree props

Property Description Type Default
allowClear Whether allow clear boolean false
autoClearSearchValue auto clear search input value when multiple select is selected/deselected boolean true
defaultValue To set the initial selected treeNode(s). string|string[] -
disabled Disabled or not boolean false
dropdownClassName className of dropdown menu string -
dropdownMatchSelectWidth Determine whether the dropdown menu and the select input are the same width. Default set min-width same as input. boolean true
dropdownStyle To set the style of the dropdown menu object -
filterTreeNode Whether to filter treeNodes by input value. The value of treeNodeFilterProp is used for filtering by default. boolean|Function(inputValue: string, treeNode: TreeNode) (should return boolean) Function
getPopupContainer To set the container of the dropdown menu. The default is to create a div element in body, you can reset it to the scrolling area and make a relative reposition. example Function(triggerNode) () => document.body
labelInValue whether to embed label in value, turn the format of value from string to {value: string, label: ReactNode, halfChecked: string[]} boolean false
loadData Load data asynchronously. function(node) -
maxTagCount Max tag count to show number -
maxTagPlaceholder Placeholder for not showing tags ReactNode/function(omittedValues) -
multiple Support multiple or not, will be true when enable treeCheckable. boolean false
placeholder Placeholder of the select input string -
searchPlaceholder Placeholder of the search input string -
searchValue work with onSearch to make search value controlled. string -
showCheckedStrategy The way show selected item in box. Default: just show child nodes. TreeSelect.SHOW_ALL: show all checked treeNodes (include parent treeNode). TreeSelect.SHOW_PARENT: show checked treeNodes (just show parent treeNode). enum { TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } TreeSelect.SHOW_CHILD
showSearch Whether to display a search input in the dropdown menu(valid only in the single mode) boolean false
size To set the size of the select input, options: large small string 'default'
treeCheckable Whether to show checkbox on the treeNodes boolean false
treeCheckStrictly Whether to check nodes precisely (in the checkable mode), means parent and child nodes are not associated, and it will make labelInValue be true boolean false
treeData Data of the treeNodes, manual construction work is no longer needed if this property has been set(ensure the Uniqueness of each value) array<{ value, title, children, [disabled, disableCheckbox, selectable] }> []
treeDataSimpleMode Enable simple mode of treeData. Changes the treeData schema to: [{id:1, pId:0, value:'1', title:"test1",...},...] where pId is parent node's id). It is possible to replace the default id and pId keys by providing object to treeDataSimpleMode false|Array<{ id: string, pId: string, rootPId: null }> false
treeDefaultExpandAll Whether to expand all treeNodes by default boolean false
treeDefaultExpandedKeys Default expanded treeNodes string[] -
treeNodeFilterProp Will be used for filtering if filterTreeNode returns true string 'value'
treeNodeLabelProp Will render as content of select string 'title'
value To set the current selected treeNode(s). string|string[] -
onChange A callback function, can be executed when selected treeNodes or input value change function(value, label, extra) -
onSearch A callback function, can be executed when the search input changes. function(value: string) -
onSelect A callback function, can be executed when you select a treeNode. function(value, node, extra) -

Tree Methods

Name Description
blur() remove focus
focus() get focus

TreeNode props

We recommend you to use treeData rather than TreeNode, to avoid the trouble of manual construction.

Property Description Type Default
selectable can be selected boolean true
disableCheckbox Disables the checkbox of the treeNode boolean false
disabled Disabled or not boolean false
isLeaf Leaf node or not boolean false
key Required property (unless using treeDataSimpleMode), should be unique in the tree string -
title Content showed on the treeNodes string|ReactNode '---'
value Will be treated as treeNodeFilterProp by default, should be unique in the tree string -