e8-tree-view
Updated on Sep 18, 2025 18 minutes to readA hierarchical tree component with optional search, selection, and dynamic expansion.
Overview
e8-tree-view displays structured data as an expandable and collapsible tree.
It supports node selection, dynamic loading of nested items, and interactive search filtering.
Users can handle custom events such as node selection, click, expand, and collapse for flexible integrations.
Insert this code into Main or Initialization script of the form to register a global method
E8App.$set(E8App.vars, 'treeItems', [
{
id: '1',
label: 'Node 1',
expanded: true,
children: [
{
id: '1.1',
icon: 'fa fa-home',
label: 'Node 1.1',
children: [
{
id: '1.1.1',
label: 'Leaf 1.1.1',
checked: true,
},
{
id: '1.1.2',
label: 'Leaf 1.1.2',
icon: false,
},
],
},
{
id: '1.2',
label: 'Node 1.2',
expanded: true,
children: [
{
id: '1.2.1',
icon: 'fa fa-address-book',
label: 'Leaf 1.2.1',
cssStyle: { color: 'red' },
draggable: true,
data: '111',
},
{
id: '1.2.2',
icon: 'fa fa-bug',
label: 'Leaf 1.2.2',
cssClass: 'text-success',
draggable: true,
data: '222',
url: 'https://every8.cloud',
},
],
},
],
},
{
id: '2',
label: 'Node 2',
children: [
{
id: '2.1',
icon: 'fa fa-user',
label: 'Node 2.1',
children: [
{
id: '2.2.1',
label: 'Leaf 2.1.1',
},
{
id: '2.1.2',
label: 'Leaf 2.1.2',
},
],
},
{
id: '2.2',
label: 'Node 2.2',
children: [
{
id: '2.2.1',
label: 'Leaf 2.2.1',
},
{
id: '2.2.2',
label: 'Leaf 2.2.2',
},
],
},
],
},
]);
🔽 Show more
Copy this snippet into the Content section
<e8-tree-view :items="vars.treeItems"></e8-tree-view>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| items | Tree data structure containing nodes and their properties. | E8TreeViewItem | Array<E8TreeViewItem> | [] |
| searchable | Enables a search input for filtering tree nodes. | boolean | true |
| selectable | Allows nodes to be selectable with checkboxes. | boolean | false |
Slots
| Slot | Description |
|---|---|
| label | Custom label slot. Provides { label: string, items: E8TreeViewItem } as slot props. |
Events
| Event | Description | Arguments (in order) |
|---|---|---|
| on-click | Called when a node label is clicked. Receives the complete node object. | eventData: E8TreeViewItem |
| on-collapse | Called after an expand/collapse action leaves the node collapsed, including when lazy loading has just started. | eventData: E8TreeViewItem |
| on-expand | Called after an expand/collapse action leaves the node expanded. Lazy-load completion does not call it. | eventData: E8TreeViewItem |
| on-select | Called after checkbox selection is applied, including after lazy loading. Receives the affected node, not a list of all selected nodes. | value: E8TreeViewItem |