4.0 KiB
Tree
Demos
Size variants
Available size variants for the ui prop: s/m.
Item click behavior
Customize content
API
Props
| Name | Type | Default | Description |
|---|---|---|---|
ui |
string= |
- | [^ui] |
datasource |
Array<Object> |
[] |
[^datasource] |
expanded |
Array |
[] |
[^expanded] |
checkable |
boolean |
false |
Whether the rows are checkable. |
checked |
Array |
[] |
[^checked] |
selectable |
boolean |
false |
Whether the nodes are selectable. |
selected |
string |
- | [^selected] |
^^^ui Style variants.
+++Enum values
| Value | Description |
|---|---|
s |
Small tree. |
m |
Medium tree. |
| +++ | |
| ^^^ |
^^^datasource
The datasource of the tree. The type of node item is {label, value, children, ...}.
+++Properties
| Name | Type | Description |
|---|---|---|
label |
string |
The descriptive label of each node. |
value |
string |
The value of each node. |
children |
Array<Object>= |
The child nodes of each node. The item type is the same as datasource items. |
| +++ | ||
| ^^^ |
^^^expanded
:::badges
.sync
:::
An array consists of the value from datasource items that denotes the expanded nodes.
^^^
^^^checked
:::badges
v-model
:::
An array consists of the value from datasource items that denotes the checked nodes.
^^^
^^^selected
:::badges
.sync
:::
An array consists of the value from datasource items that denotes the selected nodes.
^^^
Slots
| Name | Description |
|---|---|
item |
[^item] |
item-label |
The label of each node. Shares the same scope properties with the item slot. |
^^^item The content of each entire node.
+++Scope properties
| Name | Type | Description |
|---|---|---|
label |
string |
The descriptive label of current node. |
value |
string |
The value of current node. |
children |
Array<Object>= |
The array of the child nodes of each node. Shares the same type with datasource items. |
index |
number |
The index value of current node among its siblings. |
depth |
number |
The depth of current node. |
| +++ |
Additionally, custom properties apart from the listed ones will also be passes into the scope object via v-bind.
^^^
Events
| Name | Description |
|---|---|
click |
[^click] |
expand |
[^expand] |
collapse |
[^collapse] |
^^^click
Triggered when the node is clicked. The callback parameter list is (item, parents, index, depth).
+++Parameters
| Name | Type | Description |
|---|---|---|
item |
Object |
The node item. Shares the same type with datasource items. |
parents |
Array<Object> |
All ancestor nodes from the top level down to the clicked node. Shares the same item type with datasource items. |
index |
number |
The index of the clicked node among its siblings. |
depth |
number |
The depth of the clicked node in the tree. |
| +++ | ||
| ^^^ |
^^^expand
Triggered when the node is expanded. The callback parameter list is (item, index, depth).
+++Parameters
| Name | Type | Description |
|---|---|---|
item |
Object |
The node item. Shares the same type with datasource items. |
index |
number |
The index of the expanded node among its siblings. |
depth |
number |
The depth of the expanded node in the tree. |
| +++ | ||
| ^^^ |
^^^collapse
Triggered when the node is collapsed. The callback parameter list is (item, index, depth).
+++Parameters
| Name | Type | Description |
|---|---|---|
item |
Object |
The node item. Shares the same type with datasource items. |
index |
number |
The index of the collapsed node among its siblings. |
depth |
number |
The depth of the collapsed node in the tree. |
| +++ | ||
| ^^^ |
Icons
| Name | Description |
|---|---|
expand |
Click to expand (currently being collapsed). |
collapse |
Click to collapse (currently being expanded). |