## 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 ``` ::: ### Attributes | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | data | tree data | array | — | — | | props | configuration options, see the following table | object | — | — | | load | method for loading subtree data | function(node, resolve) | — | — | | show-checkbox | whether node is selectable | boolean | — | false | | render-content | render function for tree node | Function(h, { node } | - | - | | highlight-current | whether current node is highlighted | 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 | |---------- |-------- |---------- | | 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.| ### 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 |