Tree 树形控件

用于展示层级结构数据的树形控件，支持展开/折叠。

基本用法

通过 data 传入树形数据，每个节点可包含 label 和 children。

项目

node_modules

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

节点点击

node-click 事件返回点击的节点数据和路径。

文档

图片

音乐

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

API

Props

名称	类型	默认值	说明
data	TreeNodeData[]	—	树形数据
nodeKey	string	'id'	节点唯一键字段名

Events

名称	参数	说明
nodeClick	(node, path)	点击节点时触发

TreeNodeData

属性	类型	说明
label	string	节点显示文本
children	TreeNodeData[]	子节点（可选）

交互特性

• 箭头图标旋转指示展开/折叠
• 有子节点的节点显示展开箭头
• 嵌套层级缩进
• hover 高亮
• 完整 ARIA tree 角色