Tree

Tree control for displaying hierarchical data, with expand/collapse support.

Basic Usage

Pass tree data with data. Each node can have label and children.

Project

node_modules

<ATree :data="[
  {
    label: 'Project',
    children: [
      {
        label: 'src',
        children: [
          { label: 'index.ts' },
          { label: 'App.vue' }
        ]
      },
      { label: 'package.json' }
    ]
  }
]" />

Node Click

node-click event returns the clicked node data and path.

Documents

Images

Music

<ATree :data="data" @node-click="(node) => console.log(node.label)" />

API

Props

Name	Type	Default	Description
data	TreeNodeData[]	—	Tree data
nodeKey	string	'id'	Node unique key field

Events

Name	Parameters	Description
nodeClick	(node, path)	Triggered on node click

TreeNodeData

Property	Type	Description
label	string	Node display text
children	TreeNodeData[]	Child nodes (optional)

Interaction

• Arrow icon rotates to indicate expand/collapse
• Nodes with children show expand arrow
• Nested level indentation
• Hover highlight
• Full ARIA tree role