Tree
Basic usage:
With Checkboxes (default)
- Tree Node Label 1
- Tree Node Label 2
- Tree Node Label 2-1
- Tree Node Label 2-2
Simple
- Tree Node Label 1
- Tree Node Label 1-1
- Tree Node Label 1-2
- Tree Node Label 2
Tree Select Component
Props of Tree
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| config | The object that specifies from where to take label,icon,value,key. | Object | {labelKey: string, valueKey: string, iconKey?: string, filterBy?: string, filterLocale?: string, childrenKey?: string} | { valueKey: 'id',labelKey: 'label', iconKey: 'icon', childrenKey: 'children' } |
| default-checked-keys | Array with Node Keys | Array | --- | [] |
| empty-text | Text displayed when data is void | String | --- | No Data |
| expanded-keys | Tree state can be controlled programmatically with the expandedKeys property that defines the keys that are expanded | Object | {[key: string]: boolean} | {} |
| filter-placeholder | Placeholder Text For Search Input | String | --- | |
| loading | is Loading value | boolean | true | false | false |
| options | Array of options (VcTreeNodeType[]) | Array | --- | [] |
| returned-value | For returned specific keys of object | String | --- | |
| selectable | Whether Tree Component is selectable (with checkboxes) | Boolean | true | false | true |
| scroll-height | Max Height of tree list container | String | Number | --- | undefined |
Props of Tree Select
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| modelValue | Value of the component. | Array | TreeNodeType[] | undefined |
| class | Additional class for container | string | - | - |
| style | Additional style for container | string | object | - | null |
| tag-color | Color class for tag | string | primary | secondary | destructive | success | warning | primary |
| tag-borderless | Whether Tag with background (no border) | Boolean | - | false |
| config | The object that specifies from where to take label,icon,value,key. | Object | {labelKey: string, valueKey: string, iconKey?: string, filterBy?: string, filterLocale?: string, childrenKey?: string} | { valueKey: 'id',labelKey: 'label', iconKey: 'icon', childrenKey: 'children' } |
| options | Array of options (VcTreeNodeType[]) | Array | --- | [] |
| returned-value | For returned specific keys of object | String | --- | |
| loading | is Loading value | boolean | true | false | false |
| empty-text | Text displayed when data is void | String | --- | No Data |
| tags-limit | Number of visible tags | Number | --- | 3 |
| scroll-height | Max Height of tree list container | String | Number | --- | 252 |
Tree Component Slots
| Name | Description |
|---|---|
| node-label | Node Item Content |
Tree Select Component Slots
| Name | Description |
|---|---|
| option-label | Node Item Content |
Events of Tree Component
| Method | Description | Parameters |
|---|---|---|
| node-collapse | Triggers when current node close | Node Item |
| node-expand | Triggers when current node open | Node Item |
| node-select | Triggers when current node select | Node Item |
| node-unselect | Triggers when current node unselect | Node Item |
| update:expandedKeys | Triggers when update expandedKeys | expandedKeys |
| update:selectedKeys | Triggers when update selectedKeys | selectedKeys |
Events of Tree Select Component
| Method | Description | Parameters |
|---|---|---|
| update:modelValue | Triggers when update modelValue | modelValue |
| on-change | Triggers when change value. If prop returnedValue will return Array of some returnedValue, else will returned Array with node objects | value |