Tree
Basic usage
Almost anything can be represented in a tree structure. Examples include directories, organization hierarchies, biological classifications, countries, etc. The Tree component is a way of representing the hierarchical relationship between these things. You can also expand, collapse, and select a treeNode within a Tree.
Customize Icon
You can customize icons for different nodes.
load data asynchronously
To load data asynchronously when click to expand a treeNode.
Tree With Line
Customize collapse/expand icon
ReplaceFields
Replace the title,key and children fields in treeNode with the corresponding fields in treeData.
Virtual scroll
Use virtual list through height prop.
查询树节点
Use the setExpand method to expand the corresponding parent node, and use the scrollTo method to scroll to the specified node.
API
Tree Attributes
| Name | Description | Type | Default | Version |
|---|---|---|---|---|
| blockNode | Whether treeNode fill remaining horizontal space | boolean | false | |
| checkable | Adds a Checkbox before the treeNodes | boolean | false | |
| checkedKeys(v-model) | Specifies the keys of the checked treeNodes | string[] | number[] | [] | |
| defaultExpandAll | Whether to expand all treeNodes by default | boolean | false | |
| disabled | whether disabled the tree | boolean | false | |
| expandedKeys(v-model) | Specifies the keys of the expanded treeNodes | string[] | number[] | [] | |
| fieldNames | Replace the label,value and children fields in treeNode with the corresponding fields in treeData | object | {children:'children', label:'label', value:'value' } | |
| height | Config virtual scroll height. Will not support horizontal scroll when enable this | number | — | |
| load | Load data asynchronously | function(node) | — | |
| multiple | Allows selecting multiple treeNodes | boolean | false | |
| selectable | whether can be selected | boolean | true | |
| selectedKeys(v-model) | Specifies the keys of the selected treeNodes | string[] | number[] | [] | |
| showIcon | Shows the icon before a TreeNode's title. | boolean | false | |
| showLine | Shows a connecting line | boolean | false | |
| treeData | treeNode of tree | TreeNode[] | — |
Tree Events
| Name | Description | Type |
|---|---|---|
| select | Callback function for when the user clicks a treeNode | (checkedKeys: (string | number)[], e: { node: any }) => void |
| expand | Callback function for when a treeNode is expanded or collapsed | (expandedKeys: (string | number)[], e: { expand: boolean; node: any }) => void |
| check | Callback function for when the onCheck event occurs | (checkedKeys: (string | number)[], e: { checked: boolean; node: any }) => void |
TreeNode
| Name | Description | Type | Default |
|---|---|---|---|
| checkable | When Tree is checkable, set TreeNode display Checkbox or not | boolean | — |
| disableCheckbox | Disables the checkbox of the treeNode | boolean | false |
| disabled | Disables the treeNode | boolean | false |
| isLeaf | Determines if this is a leaf node(effective when loadData is specified) | boolean | false |
| key | Used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. | string | number | — |
| title | Title | string | — |
Tree Slots
| Name | Description |
|---|---|
| icon | customize icon |
| switcherIcon | customize collapse/expand icon of tree node |
| title | custom title |
Tree Exposes
| Name | Description | Type |
|---|---|---|
| setExpand | Set expandedKeys | (str: string | ((node: TreeNodeType) => boolean)) => instance |
| scrollTo | Scroll to the node(Enable virtual scroll and reach the desired quantity height / 28 Round Up) | (key: string | number) => instance |
Contributors
lazy