Tree 树形控件

用清晰的层级结构展示信息，可展开或折叠。

基础用法

一级节点 1

一级节点 2

一级节点 3 (叶子)

<my-tree :data="data" @node-click="handleClick" />

组件结构

根元素 .my-tree 包含多个 tree-node 子组件，每个 tree-node 由 .my-tree-node__label（含箭头图标与标签文本）和递归的子节点组成。

CSS 类名

类名	说明
.my-tree	根元素
.my-tree-node	树节点容器
.my-tree-node__label	节点标签（可点击），包含箭头和文本
.my-tree-node__label.is-selected	选中状态
.my-tree-node__label.is-disabled	禁用状态
.my-tree-node__arrow	展开/折叠箭头图标
.my-tree-node__arrow.is-expanded	已展开状态（箭头旋转 90 度）

API

属性	说明	类型	默认值
data	树形数据	TreeNodeData[]	[]

interface TreeNodeData {
  id: string | number
  label: string
  children?: TreeNodeData[]
  disabled?: boolean
}

事件	说明
node-click	节点点击
node-expand	节点展开/折叠