Quasar 树表示一个高度可配置的组件，用于显示层次结构数据，例如以树结构显示目录。
使用
基本
没有连接线
密集v2.2.4+
强制暗模式
性能注意事项v2.9.2+
当使用相对较大的数据时，为了提高性能，我们建议使用 no-transition 布尔型 prop，它将显著提高运行时速度。
<q-tree no-transition ...content_paste
集成示例
更多信息：QSplitter，QTabPanels。
自定义内容
注意（在下面的示例中）默认的标题和主体插槽自定义。
注意（在下面的示例中）自定义标题和主体插槽。
警告
单击或按下 SPACE 或 ENTER 键选择树项（并使自定义标题失去焦点）。
如果您不想发生这种情况，只需将自定义标题的内容包装在 <div @click.stop @keypress.stop> 中（或将监听器添加到正在发出它们的相应组件/元素中）。
手风琴、过滤和可选
在下面的示例中，当一个节点展开时，兄弟节点会收缩。
延迟加载
选择与勾选、展开
- 选择（通过 QTree
selectedprop）是指当前选中的节点（以不同的背景突出显示）。 - 勾选（通过 QTree
tickedprop）是指与每个节点关联的复选框。 - 展开（通过 QTree
expandedprop）是指展开的节点。
上述所有属性都需要使用 v-model:<prop_name> 指令动态绑定，才能正常工作（例如：v-model:expanded）。
勾选策略
有三种勾选策略：“leaf”、“leaf-filtered”、“strict”，另外还有默认的“none”，它禁用勾选。
| 策略 | 描述 |
|---|---|
| leaf | 勾选的节点仅为叶子节点。勾选一个节点也会影响父节点的勾选状态（父节点变为部分勾选或勾选），以及它的子节点（所有可勾选的子节点变为勾选）。 |
| leaf-filtered | 与 leaf 相同的概念，只是此策略仅适用于已过滤的节点（过滤后仍然可见的节点）。 |
| strict | 勾选的节点独立于父节点或子节点的勾选状态。 |
您可以为 QTree 应用全局勾选策略，并在 nodes 模型中指定 tickStrategy 来局部更改某个节点的勾选策略。
自定义过滤方法
您可以通过指定 filter-method prop 来自定义过滤方法。下面的方法根据输入是否也包含“(*)”进行过滤
节点模型结构
以下描述了节点的属性，这些属性会被 QTree 的 v-model 考虑。
| 节点属性 | 类型 | 不存在时的行为 | 描述 |
|---|---|---|---|
| <nodeKey> | 字符串，数字 | 会生成一个错误 | 节点的键。该键是从 nodeKey 属性中指定的键中提取的。 |
| label | 字符串 | 该项没有标签 | 节点的标签。当设置 labelKey prop 时，标签将从该键中提取。 |
| icon | 字符串 | 使用默认图标 | 节点的图标。 |
| iconColor | 字符串 | 使用继承的颜色 | 节点的图标颜色。来自 Quasar 颜色调色板。 |
| img | 字符串 | 不显示图像 | 节点的图像。使用 /public 文件夹。例如：“mountains.png” |
| avatar | 字符串 | 不显示头像 | 节点的头像。使用 /public 文件夹。例如：“boy-avatar.png” |
| children | 数组 | 此节点没有子节点 | 子节点的节点数组。 |
| disabled | 布尔值 | 该节点已启用 | 节点是否已禁用？ |
| expandable | 布尔值 | 该节点可展开 | 节点是否可展开？ |
| selectable | 布尔值 | 该节点可选 | 节点是否可选？ |
| handler | 函数 | 不调用额外的函数 | 单击节点时应调用的自定义函数。接收 node 作为参数。 |
| tickable | 布尔值 | 该节点根据勾选策略可勾选 | 当使用勾选策略时，每个节点都会显示一个复选框。节点的复选框是否应禁用？ |
| noTick | 布尔值 | 节点显示一个复选框 | 当使用勾选策略时，节点是否应显示一个复选框？ |
| tickStrategy | 字符串 | 使用“none”勾选策略 | 仅为该节点覆盖全局勾选策略。其中之一：“leaf”、“leaf-filtered”、“strict”、“none”。 |
| lazy | 布尔值 | 子节点不会延迟加载 | 子节点是否应延迟加载？在这种情况下，也不要指定“children” prop。 |
| header | 字符串 | 使用“default-header”插槽 | 节点标题作用域插槽名称，不含必需的“header-”前缀。例如：“story” 指的是“header-story” 作用域插槽。 |
| body | 字符串 | 使用“default-body”插槽 | 节点主体作用域插槽名称，不含必需的“body-”前缀。例如：“story” 指的是“body-story” 作用域插槽。 |