TreeMenu 树型菜单

树型菜单组件用于展示具有层级关系的导航结构，常见于后台管理系统的侧边栏导航。

---

基础用法

通过 :items 传入树型菜单配置数据，支持图标、徽标、禁用态。

<TTreeMenu :items="[
  { label: '仪表盘', icon: IconHome, href: '#', active: true },
  { label: '项目', href: '#', badge: '3' },
  { label: '内容管理', icon: IconFileText, children: [
    { label: '文章列表', href: '#' },
    { label: '分类管理', href: '#' },
  ]},
  { label: '用户管理', href: '#' },
  { label: '设置', href: '#', disabled: true },
]" />

---

多级嵌套与激活高亮

支持任意层级嵌套。子项设置 active: true 会自动递归高亮所有祖先菜单。下例中「📄 所有文章」处于激活态，其父级「内容管理」→「文章管理」均自动高亮。

<TTreeMenu :items="[
  { label: '仪表盘', icon: IconHome, href: '#' },
  { label: '内容管理', icon: IconFileText, children: [
    { label: '文章管理', children: [
      { label: '所有文章', href: '#', active: true },   ← 当前激活
      { label: '写文章', href: '#' },
    ]},
    { label: '页面管理', href: '#' },
  ]},
]" v-model:expanded-keys="expandedKeys" />

---

手风琴模式

默认 accordion 为 true，同一时间仅展开一个父节点，展开新节点时自动关闭其他同级节点。

<TTreeMenu :items="items" accordion />

---

默认展开全部

设置 default-expand-all 开启所有节点默认展开。

<TTreeMenu :items="items" default-expand-all />

---

深色主题

配合 data-bs-theme="dark" 使用深色侧边栏风格。

<aside class="navbar navbar-vertical" data-bs-theme="dark">
  <div class="container-fluid">
    <TTreeMenu :items="items" />
  </div>
</aside>

---

API

TTreeMenu Props

Prop	说明	类型	默认值
items	树型菜单数据	TreeMenuItem[]	[]
accordion	手风琴模式（同级仅展开一个）	boolean	true
defaultExpandAll	默认展开所有节点	boolean	false
expandedKeys	展开节点 key 列表（v-model）	(string | number)[]	[]
indent	每层缩进像素	number	16
collapsible	是否允许折叠	boolean	true

TTreeMenu Emits

Emit	参数	说明
update:expandedKeys	keys: (string | number)[]	展开键列表变化
select	item: TreeMenuItem	选中某个叶子菜单项
toggle	item: TreeMenuItem, expanded: boolean	展开/折叠状态变化

TreeMenuItem

属性	类型	说明
label	string	显示文字
icon	Component	图标组件（@tabler/icons-vue）
href	string	链接地址
target	string	链接打开方式
active	boolean	是否激活（子项 active 会递归高亮父级）
disabled	boolean	是否禁用
badge	string | { text, color }	徽标（color 为 bg-xxx 类名）
children	TreeMenuItem[]	子菜单项
key	string | number	自定义节点标识（用于 expandedKeys 受控）