## Tree Display a set of data with hierarchies. ### Basic usage Basic tree structure. ::: demo ```html ``` ::: ### Selectable Used for node selection. In the following example, data for each layer is acquired after being clicked. If there is no child data, the expanding icon will disappear. ::: demo ```html ``` ::: ### Accordion Only one node among the same level can be expanded at one time. ::: demo ```html ``` ::: ### Attributes | Attribute | Description | Type | Accepted Values | Default | | --------------------- | ---------------------------------------- | --------------------------- | --------------- | ------- | | data | tree data | array | — | — | | empty-text | text displayed when data is void | string | — | — | | node-key | unique identity key name for nodes, its value should be unique across the whole tree | string | — | — | | props | configuration options, see the following table | object | — | — | | load | method for loading subtree data | function(node, resolve) | — | — | | render-content | render function for tree node | Function(h, { node } | — | — | | highlight-current | whether current node is highlighted | boolean | — | false | | current-node-key | key of current node, a set only prop | string, number | — | — | | default-expand-all | whether to expand all nodes by default | boolean | — | false | | expand-on-click-node | whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon. | — | true | | | auto-expand-parent | whether to expand father node when a child node is expanded | boolean | — | true | | default-expanded-keys | array of keys of initially expanded nodes | array | — | — | | show-checkbox | whether node is selectable | boolean | — | false | | check-strictly | whether checked state of a node not affects its father and child nodes when `show-checkbox` is `true` | boolean | — | false | | default-checked-keys | array of keys of initially checked nodes | array | — | — | | filter-node-method | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | — | — | | accordion | whether only one node among the same level can be expanded at one time | boolean | — | false | ### props | Attribute | Description | Type | Accepted Values | Default | | --------- | ---------------------------------------- | ------ | --------------- | ------- | | label | specify which key of node object is used as the node's label | string | — | — | | children | specify which key of node object is used as the node's subtree | string | — | — | ### Method `Tree` has the following method, which returns the currently selected array of nodes. | Method | Description | Parameters | | --------------- | ---------------------------------------- | ---------------------------------------- | | filter | filter all tree nodes, filtered nodes will be hidden | Accept a parameter which will be used as first parameter for filter-node-method | | getCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes | Accept a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. | | setCheckedNodes | set certain nodes to be checked, only works when `node-key` is assigned | an array of nodes to be checked | | getCheckedKeys | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of node's keys | (leafOnly) Accept a boolean type parameter whose default value is `true`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. | | setCheckedKeys | set certain nodes to be checked, only works when `node-key` is assigned | (keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is `true`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. | | setChecked | set node to be checked or not, only works when `node-key` is assigned | (key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not. | ### Events | Event Name | Description | Parameters | | -------------- | ---------------------------------------- | ---------------------------------------- | | node-click | triggers when a node is clicked | three parameters: node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself | | check-change | triggers when the selected state of the node changes | three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes | | current-change | triggers when current node changes | two parameters: node object corresponding to the current node, `node` property of TreeNode | | node-open | triggers when current node open | three parameters: node object corresponding to the node opened, `node` property of TreeNode, TreeNode itself | | node-close | triggers when current node close | three parameters: node object corresponding to the node closed, `node` property of TreeNode, TreeNode itself |