---
title: "Tree"
description: "基于 Nuxt UI Tree 的树形组件，补齐搜索、懒加载、工具栏、复选框与父子策略。"
seo_title: "Tree"
seo_description: "A tree component built on Nuxt UI Tree, adding search filtering with highlight, async lazy loading, a toolbar, cascading checkboxes, parent/child strategy, key-based binding and an imperative API."
canonical_url: "https://nuxt.mhaibaraai.cn/docs/components/tree"
---
# Tree

> 基于 Nuxt UI Tree 的树形组件，补齐搜索、懒加载、工具栏、复选框与父子策略。

## 简介

`MTree` 在 Nuxt UI `Tree` 之上做薄壳封装，透传其全部 props、事件与插槽，并补齐多项增强能力：搜索过滤与高亮、异步懒加载、工具栏（展开/折叠切换、三态全选）、复选框多选与父子策略（级联 / 互不关联）、键绑定（`v-model:selectedKeys`）以及命令式 API 与选中分类。树形数据的归一化、过滤、遍历等运算复用 `@movk/core` 的 `Tree` 工具方法。

> \[\!NOTE\]
> See: https://ui.nuxt.com/docs/components/tree
> 
> 基于 Nuxt UI 的 Tree 组件构建，原生 props 与插槽完全透传

## 用法

传入 `items` 渲染层级结构，节点 `defaultExpanded` 控制初始展开，`v-model` 绑定选中节点：

```vue
<script setup lang="ts">
const items = ref([{"label":"app","icon":"i-lucide-folder","defaultExpanded":true,"children":[{"label":"app.vue","icon":"i-vscode-icons-file-type-vue"},{"label":"nuxt.config.ts","icon":"i-vscode-icons-file-type-nuxt"}]},{"label":"composables","icon":"i-lucide-folder","children":[{"label":"useAuth.ts","icon":"i-vscode-icons-file-type-typescript"},{"label":"useUser.ts","icon":"i-vscode-icons-file-type-typescript"}]}])
const value = ref({"label":"app.vue"})
</script>

<template>
  <MTree :items="items" />
</template>
```

### `defaultExpanded` 默认展开

`defaultExpanded` 作用：以策略推导初始展开的父节点，缺省回退节点上的 `defaultExpanded` 标记。传 `true` 展开全部父级、传 `number` 仅展开 depth 小于该值的父级、传函数按节点与深度自定义：

```vue
<script setup lang="ts">
const items = ref([{"label":"app","icon":"i-lucide-folder","children":[{"label":"composables","icon":"i-lucide-folder","children":[{"label":"useAuth.ts","icon":"i-vscode-icons-file-type-typescript"},{"label":"useUser.ts","icon":"i-vscode-icons-file-type-typescript"}]},{"label":"app.vue","icon":"i-vscode-icons-file-type-vue"}]},{"label":"nuxt.config.ts","icon":"i-vscode-icons-file-type-nuxt"}])
</script>

<template>
  <MTree :items="items" default-expanded />
</template>
```

### `searchable` 搜索过滤

`searchable` 作用：在顶部渲染搜索框，按关键字剪枝并保留命中节点的祖先链；`highlight` 默认开启，高亮命中文本，命中后自动展开。`filter` 可自定义匹配谓词，`search` 支持 `v-model:search` 双向绑定关键字：

```vue
<script setup lang="ts">
const items = ref([{"label":"app","icon":"i-lucide-folder","children":[{"label":"useAuth.ts","icon":"i-vscode-icons-file-type-typescript"},{"label":"useUser.ts","icon":"i-vscode-icons-file-type-typescript"}]},{"label":"components","icon":"i-lucide-folder","children":[{"label":"Card.vue","icon":"i-vscode-icons-file-type-vue"},{"label":"Button.vue","icon":"i-vscode-icons-file-type-vue"}]}])
</script>

<template>
  <MTree :items="items" searchable />
</template>
```

### `checkable` 复选框级联

`checkable` 作用：在节点前渲染复选框，内部启用 `multiple` 与父子级联、子级半选冒泡，`v-model` 收集选中节点数组。复选框与节点 `icon`、父节点 folder 图标共存：

```vue
<script setup lang="ts">
const items = ref([{"label":"app","icon":"i-lucide-folder","defaultExpanded":true,"children":[{"label":"app.vue","icon":"i-vscode-icons-file-type-vue"},{"label":"nuxt.config.ts","icon":"i-vscode-icons-file-type-nuxt"}]},{"label":"composables","icon":"i-lucide-folder","children":[{"label":"useAuth.ts","icon":"i-vscode-icons-file-type-typescript"},{"label":"useUser.ts","icon":"i-vscode-icons-file-type-typescript"}]}])
const value = ref([])
</script>

<template>
  <MTree :items="items" checkable />
</template>
```

> \[\!NOTE\]
> 
> checkable
> 
>  等价于 
> 
> multiple
> 
>  \+ 
> 
> strategy
> 
> （默认 
> 
> cascade
> 
> ）的语法糖。仅需多选而不渲染复选框时改用 
> 
> multiple
> 
> 。

### `multiple` 多选

`multiple` 作用：开启多选但不渲染复选框，点击节点累加选中，`v-model` 收集选中节点数组：

```vue
<script setup lang="ts">
const items = ref([{"label":"技术中心","defaultExpanded":true,"children":[{"label":"前端组","children":[{"label":"组件库"},{"label":"可视化"}]},{"label":"后端组"}]},{"label":"产品中心","children":[{"label":"交互设计"}]}])
const value = ref([])
</script>

<template>
  <MTree :items="items" multiple />
</template>
```

### `strategy` 父子策略

`strategy` 作用：控制多选 / `checkable` 下的父子勾选关系。`cascade`（默认）父子级联且子级全选时回填父级，`isolated` 父子互不关联、半选不冒泡：

```vue
<script setup lang="ts">
const items = ref([{"label":"技术中心","defaultExpanded":true,"children":[{"label":"前端组","children":[{"label":"组件库"},{"label":"可视化"}]},{"label":"后端组","children":[{"label":"网关"},{"label":"存储"}]}]}])
const value = ref([])
</script>

<template>
  <MTree :items="items" checkable strategy="cascade" />
</template>
```

### `selectedKeys` 键绑定

`selectedKeys` 作用：以节点 key 数组双向绑定选中，适合从后端回显或与路由同步。`v-model:selectedKeys` 与 `v-model` 互通，键由 `getKey` / `labelKey` 派生：

```vue
<script setup lang="ts">
const items = ref([{"label":"app","icon":"i-lucide-folder","defaultExpanded":true,"children":[{"label":"app.vue","icon":"i-vscode-icons-file-type-vue"},{"label":"nuxt.config.ts","icon":"i-vscode-icons-file-type-nuxt"}]}])
</script>

<template>
  <MTree v-model:selected-keys="selectedKeys" :items="items" checkable />
</template>
```

### `toolbar` 工具栏

`toolbar` 作用：渲染顶部工具栏，提供展开 / 折叠切换按钮；`searchable` 时内嵌可清除的搜索框，`checkable` 时附带三态全选复选框与选中计数：

```vue
<script setup lang="ts">
const items = ref([{"label":"技术中心","children":[{"label":"前端组","children":[{"label":"组件库"},{"label":"可视化"}]},{"label":"后端组","children":[{"label":"网关"},{"label":"存储"}]}]},{"label":"产品中心","children":[{"label":"交互设计"},{"label":"用户研究"}]}])
const value = ref([])
</script>

<template>
  <MTree :items="items" toolbar searchable checkable />
</template>
```

> \[\!NOTE\]
> 
> 工具栏的全选计数按
> 
> 叶子
> 
> 计：级联下选中父级会带上子级 key，按叶子统计可避免重复计数。

### `lazy` 异步懒加载

`lazy` 作用：配合 `loadChildren`，展开未加载的父节点时拉取子节点并显示加载态；节点 `isLeaf` 标记为叶子，不渲染展开占位：

```vue [ComponentsTreeLazyExample.vue]
<script setup lang="ts">
import type { TreeItem } from '@movk/nuxt'

const items: TreeItem[] = [
  { label: '区域 A' },
  { label: '区域 B' },
  { label: '直辖节点', isLeaf: true }
]

let seq = 0
function loadChildren(node: TreeItem): Promise<TreeItem[]> {
  return new Promise(resolve => setTimeout(() => {
    seq += 1
    resolve([
      { label: `${node.label} / 子节点 ${seq}-1` },
      { label: `${node.label} / 子节点 ${seq}-2`, isLeaf: true }
    ])
  }, 800))
}
</script>

<template>
  <MTree :items="items" lazy :load-children="loadChildren" />
</template>
```

### `childrenKey` 字段映射

`childrenKey` 作用：将后端的子节点字段归一化为 `children`，`labelKey` 指定展示字段，无需预先改造数据结构：

```vue
<script setup lang="ts">
const items = ref([{"name":"技术中心","nodes":[{"name":"前端组","nodes":[{"name":"组件库"},{"name":"可视化"}]},{"name":"后端组"}]},{"name":"产品中心","nodes":[{"name":"交互设计"}]}])
</script>

<template>
  <MTree :items="items" children-key="nodes" label-key="name" />
</template>
```

### `labelKey` 点路径取值

`labelKey` 作用：指定节点展示字段，支持 `meta.title` 形式的点路径深取嵌套字段；键派生、搜索与高亮均按同一路径取值：

```vue
<script setup lang="ts">
const items = ref([{"meta":{"title":"技术中心"},"children":[{"meta":{"title":"前端组"},"children":[{"meta":{"title":"组件库"}},{"meta":{"title":"可视化"}}]},{"meta":{"title":"后端组"}}]},{"meta":{"title":"产品中心"},"children":[{"meta":{"title":"交互设计"}}]}])
</script>

<template>
  <MTree :items="items" label-key="meta.title" searchable />
</template>
```

> \[\!NOTE\]
> 
> 点路径需与 UTree 内部取值一致，仅支持点分隔（
> 
> a.b.c
> 
> ），不支持括号下标（
> 
> a\[0\].b
> 
> ）。

### `virtualize` 虚拟滚动

`virtualize` 作用：透传 Nuxt UI Tree 的虚拟化能力，仅渲染可视区节点，适配大数据量树：

```vue [ComponentsTreeVirtualizeExample.vue]
<script setup lang="ts">
import type { TreeItem } from '@movk/nuxt'

const items: TreeItem[] = Array.from({ length: 60 }, (_, group) => ({
  label: `分组 ${group + 1}`,
  defaultExpanded: group === 0,
  children: Array.from({ length: 30 }, (_, leaf) => ({ label: `节点 ${group + 1}-${leaf + 1}` }))
}))
</script>

<template>
  <MTree :items="items" :virtualize="true" class="max-h-72 w-md" />
</template>
```

### `color` 主色

`color` 作用：透传 Nuxt UI Tree 的主色，作用于选中节点的文字色与键盘聚焦环；下例预选一个节点以便观察：

```vue
<script setup lang="ts">
const items = ref([{"label":"app","icon":"i-lucide-folder","defaultExpanded":true,"children":[{"label":"app.vue","icon":"i-vscode-icons-file-type-vue"},{"label":"nuxt.config.ts","icon":"i-vscode-icons-file-type-nuxt"}]},{"label":"composables","icon":"i-lucide-folder","children":[{"label":"useAuth.ts","icon":"i-vscode-icons-file-type-typescript"}]}])
const value = ref({"label":"app.vue"})
</script>

<template>
  <MTree :items="items" color="error" />
</template>
```

> \[\!NOTE\]
> 
> UTree 的 
> 
> color
> 
>  仅作用于选中节点文字与焦点环；未选中任何节点时不会有可见变化。单色图标（如 lucide）随文字色继承，多色图标（如 vscode-icons）保持自身配色。

### `trailingIcon` 末尾图标

`trailingIcon` 作用：替换父节点末尾的展开指示图标（默认 `i-lucide-chevron-down`）；节点数据的 `item.trailingIcon` 优先级更高：

```vue
<script setup lang="ts">
const items = ref([{"label":"app","icon":"i-lucide-folder","trailingIcon":"i-lucide-arrow-down","defaultExpanded":true,"children":[{"label":"app.vue","icon":"i-vscode-icons-file-type-vue"},{"label":"nuxt.config.ts","icon":"i-vscode-icons-file-type-nuxt"}]},{"label":"composables","icon":"i-lucide-folder","children":[{"label":"useAuth.ts","icon":"i-vscode-icons-file-type-typescript"}]}])
</script>

<template>
  <MTree :items="items" trailing-icon="i-lucide-chevron-right" />
</template>
```

### `expandedIcon` 展开图标

`expandedIcon` / `collapsedIcon` 作用：自定义父节点展开 / 折叠时的 leading 图标（默认 `i-lucide-folder-open` / `i-lucide-folder`）：

```vue
<script setup lang="ts">
const items = ref([{"label":"app","defaultExpanded":true,"children":[{"label":"app.vue","icon":"i-vscode-icons-file-type-vue"},{"label":"nuxt.config.ts","icon":"i-vscode-icons-file-type-nuxt"}]},{"label":"composables","children":[{"label":"useAuth.ts","icon":"i-vscode-icons-file-type-typescript"}]}])
</script>

<template>
  <MTree :items="items" expanded-icon="i-lucide-book-open" collapsed-icon="i-lucide-book" />
</template>
```

> \[\!NOTE\]
> 
> 节点的 
> 
> item.icon
> 
>  优先级高于 
> 
> expandedIcon
> 
>  / 
> 
> collapsedIcon
> 
> ，故需要随展开态切换图标的文件夹不应设置 
> 
> item.icon
> 
> 。

### `disabled` 禁用

`disabled` 作用：禁用整棵树，阻断点击节点、工具栏控件与复选框的展开、折叠、选中操作；节点级 `item.disabled` 连同其整棵子树一并禁用——冻结该节点展开态，子树内复选框禁用且不可选中：

```vue
<script setup lang="ts">
const items = ref([{"label":"app","icon":"i-lucide-folder","defaultExpanded":true,"children":[{"label":"app.vue","icon":"i-vscode-icons-file-type-vue"},{"label":"nuxt.config.ts","icon":"i-vscode-icons-file-type-nuxt"}]},{"label":"composables","icon":"i-lucide-folder","children":[{"label":"useAuth.ts","icon":"i-vscode-icons-file-type-typescript"}]}])
const value = ref([{"label":"useAuth.ts"}])
</script>

<template>
  <MTree :items="items" checkable toolbar disabled />
</template>
```

> \[\!NOTE\]
> 
> 命令式 API（
> 
> expandToDepth
> 
> 、
> 
> selectAll
> 
>  等）属显式调用，不受 
> 
> disabled
> 
>  影响；
> 
> disabled
> 
>  仅拦截用户的点击与工具栏交互。

## 示例

### 自定义节点

通过透传的 `item-trailing` 等插槽自定义节点内容，未覆盖的插槽仍由 Nuxt UI Tree 默认渲染：

```vue [ComponentsTreeSlotExample.vue]
<script setup lang="ts">
import type { TreeItem } from '@movk/nuxt'

const items: TreeItem[] = [
  {
    label: 'app',
    icon: 'i-lucide-folder',
    defaultExpanded: true,
    children: [
      { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
      { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
    ]
  }
]
</script>

<template>
  <MTree :items="items">
    <template #item-trailing="{ item }">
      <UBadge v-if="!item.children" label="file" color="neutral" variant="subtle" size="sm" />
    </template>
  </MTree>
</template>
```

### 自定义工具栏

`toolbar-leading` / `toolbar-trailing` 在默认工具栏首尾追加内容；需要完全接管时改用 `#toolbar` 插槽，其作用域暴露 `toggleExpand`、`selectAll`、`clear`、`selectionSummary` 等方法与状态：

```vue [ComponentsTreeCustomToolbarExample.vue]
<script setup lang="ts">
import type { TreeItem } from '@movk/nuxt'

const items: TreeItem[] = [
  {
    label: '技术中心',
    children: [
      { label: '前端组', children: [{ label: '组件库' }, { label: '可视化' }] },
      { label: '后端组', children: [{ label: '网关' }, { label: '存储' }] }
    ]
  },
  { label: '产品中心', children: [{ label: '交互设计' }, { label: '用户研究' }] }
]

const checked = ref<TreeItem[]>([])
</script>

<template>
  <MTree v-model="checked" :items="items" toolbar searchable checkable>
    <template #toolbar-leading>
      <UBadge label="部门" color="neutral" variant="subtle" size="sm" />
    </template>
    <template #toolbar-trailing>
      <UBadge :label="`${checked.length} 项`" color="primary" variant="subtle" size="sm" />
    </template>
  </MTree>
</template>
```

### 命令式控制

通过 `useTemplateRef` 拿到组件实例，调用 `expandToDepth`、`collapseAll`、`selectAll`、`clearSelection` 等方法控制树：

```vue [ComponentsTreeImperativeExample.vue]
<script setup lang="ts">
import type { TreeExposed, TreeItem } from '@movk/nuxt'

const items: TreeItem[] = [
  {
    label: '技术中心',
    children: [
      { label: '前端组', children: [{ label: '组件库' }, { label: '可视化' }] },
      { label: '后端组', children: [{ label: '网关' }, { label: '存储' }] }
    ]
  },
  { label: '产品中心', children: [{ label: '交互设计' }, { label: '用户研究' }] }
]

const checked = ref<TreeItem[]>([])
const tree = useTemplateRef<TreeExposed>('tree')
</script>

<template>
  <div class="space-y-3">
    <div class="flex flex-wrap gap-2">
      <UButton size="xs" label="展开到第 2 层" @click="tree?.expandToDepth(2)" />
      <UButton size="xs" label="收起全部" color="neutral" variant="subtle" @click="tree?.collapseAll()" />
      <UButton size="xs" label="全选" @click="tree?.selectAll()" />
      <UButton size="xs" label="清空" color="neutral" variant="subtle" @click="tree?.clearSelection()" />
    </div>
    <MTree ref="tree" v-model="checked" :items="items" checkable />
  </div>
</template>
```

### 选中结果分类

实例的 `treeSelection` 反应式回传选中分类：`leaves`（选中叶子）、`parents`（满选父级）、`halfSelected`（半选父级）、`strictlyChecked`（剔除随父级联的子节点）：

```vue [ComponentsTreeSelectionExample.vue]
<script setup lang="ts">
import type { TreeExposed, TreeItem } from '@movk/nuxt'

const items: TreeItem[] = [
  {
    label: '技术中心',
    defaultExpanded: true,
    children: [
      { label: '前端组', children: [{ label: '组件库' }, { label: '可视化' }] },
      { label: '后端组', children: [{ label: '网关' }, { label: '存储' }] }
    ]
  }
]

const checked = ref<TreeItem[]>([])
const tree = useTemplateRef<TreeExposed>('tree')

const labels = (nodes?: TreeItem[]) => (nodes ?? []).map(node => node.label).join('、') || '无'
</script>

<template>
  <div class="space-y-3">
    <MTree ref="tree" v-model="checked" :items="items" checkable />
    <dl class="text-sm text-muted space-y-1">
      <div>叶子（leaves）：{{ labels(tree?.treeSelection.leaves) }}</div>
      <div>满选父级（parents）：{{ labels(tree?.treeSelection.parents) }}</div>
      <div>半选父级（halfSelected）：{{ labels(tree?.treeSelection.halfSelected) }}</div>
    </dl>
  </div>
</template>
```

## API

### Props

```ts
/**
 * Props for the MTree component
 */
interface MTreeProps {
  /**
   * 树数据源，按 childrenKey 解析层级
   */
  items?: T | undefined;
  /**
   * 取子节点数组的字段名，归一化为 UTree 的 children
   * @default "\"children\""
   */
  childrenKey?: string | undefined;
  /**
   * 展示字段名
   */
  labelKey?: GetItemKeys<T> | undefined;
  /**
   * 自定义节点 key，缺省取 labelKey 字段值
   */
  getKey?: ((val: T[number]) => string) | undefined;
  /**
   * 初始展开策略，缺省回退节点上的 defaultExpanded 标记
   * - true 展开全部父级
   * - number 展开 depth 小于该值的父级
   * - 函数 按节点与深度自定义
   */
  defaultExpanded?: number | boolean | ((node: T[number], depth: number) => boolean) | undefined;
  /**
   * 选中节点 key 列表，可用 v-model:selectedKeys 双向绑定
   */
  selectedKeys?: string[] | undefined;
  /**
   * 开启多选
   */
  multiple?: M | undefined;
  /**
   * 多选 / checkable 下的父子勾选策略
   * - 'cascade' 父子级联（propagateSelect + bubbleSelect）
   * - 'isolated' 父子互不关联
   */
  strategy?: TreeSelectionStrategy | undefined;
  /**
   * 选中父节点时级联选中子节点。cascade 策略下默认开启，显式 true 可在 isolated 下强制开启；关闭级联请用 strategy='isolated'
   */
  propagateSelect?: boolean | undefined;
  /**
   * 子节点全部选中时回填父节点。cascade 策略下默认开启，显式 true 可在 isolated 下强制开启；关闭级联请用 strategy='isolated'
   */
  bubbleSelect?: boolean | undefined;
  /**
   * 尺寸
   */
  size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
  /**
   * 主色
   */
  color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "important" | "neutral" | undefined;
  /**
   * 父节点展开时的图标
   */
  expandedIcon?: any;
  /**
   * 父节点折叠时的图标
   */
  collapsedIcon?: any;
  /**
   * 禁用整棵树，阻断点击、工具栏与复选框的展开、折叠、选中
   */
  disabled?: boolean | undefined;
  /**
   * 开启顶部搜索过滤
   */
  searchable?: boolean | undefined;
  /**
   * 自定义匹配谓词，缺省按 labelKey 文本不区分大小写包含匹配
   */
  filter?: TreeFilter<T[number]> | undefined;
  /**
   * 高亮命中文本，仅在 searchable 时生效
   * @default "true"
   */
  highlight?: boolean | undefined;
  /**
   * 开启异步懒加载子节点
   */
  lazy?: boolean | undefined;
  /**
   * 懒加载回调，展开未加载的父节点时调用
   */
  loadChildren?: TreeLoadChildren<T[number]> | undefined;
  /**
   * 开启顶部工具栏（展开/折叠，checkable 时附带全选/清空）
   */
  toolbar?: boolean | undefined;
  /**
   * 渲染复选框并启用多选（multiple + strategy，默认 cascade）
   */
  checkable?: M | undefined;
  ui?: (Record<string, C> & { root?: SlotClass; item?: SlotClass; listWithChildren?: SlotClass; itemWithChildren?: SlotClass; link?: SlotClass; linkLeadingIcon?: SlotClass; linkLabel?: SlotClass; linkTrailing?: SlotClass; linkTrailingIcon?: SlotClass; container?: SlotClass; toolbar?: SlotClass; toolbarButton?: SlotClass; search?: SlotClass; checkbox?: SlotClass; highlight?: SlotClass; loading?: SlotClass; loadingIcon?: SlotClass; empty?: SlotClass; }) | undefined;
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * The icon displayed on the right side of a parent node.
   */
  trailingIcon?: any;
  /**
   * The controlled value of the Tree. Can be bind as `v-model`.
   */
  modelValue?: (M extends true ? T[number][] : T[number]) | undefined;
  /**
   * The value of the Tree when initially rendered. Use when you do not need to control the state of the Tree.
   */
  defaultValue?: (M extends true ? T[number][] : T[number]) | undefined;
  /**
   * Use nested DOM structure (children inside parents) vs flattened structure (all items at same level).
   * When `virtualize` is enabled, this is automatically set to `false`.
   */
  nested?: boolean | undefined;
  /**
   * Enable virtualization for large lists.
   * Note: when enabled, the tree structure is flattened like if `nested` was set to `false`.
   */
  virtualize?: boolean | { overscan?: number | undefined; estimateSize?: number | ((index: number) => number) | undefined; } | undefined;
  onSelect?: ((e: SelectEvent<T[number]>, item: T[number]) => void) | undefined;
  onToggle?: ((e: ToggleEvent<T[number]>, item: T[number]) => void) | undefined;
  /**
   * The controlled value of the expanded item. Can be binded with `v-model`.
   * @default "[]"
   */
  expanded?: string[] | undefined;
  /**
   * How multiple selection should behave in the collection.
   */
  selectionBehavior?: "replace" | "toggle" | undefined;
  /**
   * @default "\"\""
   */
  search?: string | undefined;
}
```

### Emits

```ts
/**
 * Emitted events for the MTree component
 */
interface MTreeEmits {
  update:modelValue: (payload: [val: M extends true ? T[number][] : T[number]]) => void;
  update:expanded: (payload: [val: string[]]) => void;
  update:search: (payload: [value: string]) => void;
  change: (payload: [payload: { value: (M extends true ? T[number][] : T[number]) | undefined; keys: string[]; selection: TreeSelectionResult<T[number]>; }]) => void;
  update:modelValue: (payload: [value: (M extends true ? T[number][] : T[number]) | undefined]) => void;
  update:selectedKeys: (payload: [value: string[] | undefined]) => void;
}
```

> \[\!TIP\]
> 
> 除透传 Nuxt UI Tree 的 `update:modelValue`、`update:expanded` 外，`MTree` 额外提供：
> 
> - `update:search`：搜索关键字变化时触发，支持 `v-model:search`。
> - `update:selectedKeys`：选中 key 列表变化时触发，支持 `v-model:selectedKeys`。
> - `change`：选中变化时触发，载荷为 `{ value, keys, selection }`，`keys` 由 `getKey`/`labelKey` 派生，`selection` 为选中结果分类。

### Slots

```ts
/**
 * Slots for the MTree component
 */
interface MTreeSlots {
  item-wrapper(): any;
  item(): any;
  item-leading(): any;
  item-label(): any;
  item-trailing(): any;
  toolbar(): any;
  /**
   * 默认工具栏起始处追加内容
   */
  toolbar-leading(): any;
  /**
   * 默认工具栏末尾追加内容
   */
  toolbar-trailing(): any;
  empty(): any;
  loading(): any;
}
```

### Expose

您可以通过 [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref){rel="[\"nofollow\"]"} 访问该类型化组件实例。

| Name                   | Type                                                                                                       |
| ---------------------- | ---------------------------------------------------------------------------------------------------------- |
| `expandAll()`          | `void`   
 展开全部可展开节点                                                                                       |
| `collapseAll()`        | `void`   
 收起全部节点                                                                                          |
| `expandToDepth(depth)` | `void`   
 展开到指定层级，`depth=0` 收起全部                                                                          |
| `selectAll()`          | `void`   
 选中全部可选节点                                                                                        |
| `clearSelection()`     | `void`   
 清空选中                                                                                            |
| `treeSelection`        | `TreeSelectionResult`   
 当前选中结果分类（`selected` / `leaves` / `parents` / `halfSelected` / `strictlyChecked`） |

## Theme

<component-theme></component-theme>## Changelog

See commit history for [src/runtime/components/Tree.vue](https://github.com/mhaibaraai/movk-nuxt/commits/main/src/runtime/components/Tree.vue).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.