树状图 | Quasar 中文网

树状图

Quasar Tree 是一个高度可配置的组件，用于显示分层数据，例如树形结构中的目录。

¥Quasar Tree represents a highly configurable component that displays hierarchical data, such as a table of contents in a tree structure.

用法(Usage)

¥Usage

基本(Basic)

¥Basic

无连接线(No connector lines)

¥No connector lines

密集
v2.2.4+
(Dense
v2.2.4+
)

¥Dense

v2.2.4+

强制暗黑模式(Force dark mode)

¥Force dark mode

性能考虑
v2.9.2+
(Perf considerations
v2.9.2+
)

¥Perf considerations

v2.9.2+

当使用相对较大的数据时，为了提高性能，我们建议使用 no-transition 布尔属性，这将显著提高运行时速度。

¥When using relatively large data, for performance we recommend using the no-transition Boolean prop which will account for a significant runtime speed improvement.

<q-tree no-transition ...

集成示例(Integrated example)

¥Integrated example

更多信息：QSplitter, QTabPanels.

¥More info: QSplitter, QTabPanels.

自定义内容(Customize content)

¥Customize content

请注意（在下面的示例中）默认的页眉和正文插槽自定义。

¥Notice (in the example below) the default header and body slot customization.

请注意（在下面的示例中）自定义的页眉和正文插槽。

¥Notice (in the example below) the custom header and body slots.

警告

在自定义标题上点击或按下 SPACE 或 ENTER 按钮将选中树状项（自定义标题会变得模糊）。

¥Clicking or pressing SPACE or ENTER on the custom header selects the tree item (and the custom header is blurred).

如果你不想发生这种情况，只需将自定义标头的内容封装在 <div @click.stop @keypress.stop> 中（或将监听器添加到发出它们的各个组件/元素中）。

¥If you don’t want this to happen just wrap the content of the custom header in a <div @click.stop @keypress.stop> (or add the listeners to the respective component/element that is emitting them).

折叠、过滤和可选(Accordion, filtering and selectable)

¥Accordion, filtering and selectable

在以下示例中，当一个节点展开时，其兄弟节点也会收缩。

¥In the example below, sibling nodes get contracted when one gets expanded.

延迟加载(Lazy loading)

¥Lazy loading

选择 vs. 勾选、扩展(Selection vs ticking, expansion)

¥Selection vs ticking, expansion

选择（通过 QTree selected 属性）指的是当前选定的节点（以不同的背景高亮）。
¥Selection (through QTree selected prop) refers to the currently selected node (gets highlighted with different background).
勾选（通过 QTree ticked 属性）是指与每个节点关联的复选框。
¥Ticking (through QTree ticked prop) refers to the checkbox associated with each node.
扩展（通过 QTree expanded 属性）指的是扩展的节点。
¥Expansion (through QTree expanded prop) refers to the nodes that are expanded.

以上所有属性都需要使用 v-model:<prop_name> 指令进行动态绑定才能正常工作（例如：v-model:expanded）。

¥All properties above require to be dynamically bound using v-model:<prop_name> directive in order for them to work correctly (example: v-model:expanded).

勾选策略(Tick strategy)

¥Tick strategy

有三种勾选策略：‘leaf’、‘leaf-filtered’、‘strict’ 以及一个额外的（默认）‘none’，用于禁用 ticking。

¥There are three ticking strategy: ‘leaf’, ‘leaf-filtered’, ‘strict’ with an additional (and default) ‘none’ which disables ticking.

策略	描述
leaf	勾选的节点仅限于叶子节点。勾选一个节点也会影响父节点的勾选状态（父节点变为部分勾选或全部勾选），以及其子节点（所有可勾选的子节点都会变为全部勾选）。
leaf-filtered	与 `leaf` 的概念相同，不同之处在于此策略仅适用于已筛选节点（筛选后仍然可见的节点）。
strict	勾选的节点与父节点或子节点的勾选状态无关。

你可以为 QTree 应用全局 tick 策略，并通过在 nodes 模型中指定 tickStrategy 来本地更改特定节点的 tick 策略。

¥You can apply a global tick strategy for a QTree and locally change the ticking strategy for a certain node by specifying the tickStrategy in the nodes model.

自定义过滤方式(Custom filter method)

¥Custom filter method

你可以通过指定 filter-method 属性来自定义过滤方法。如果输入也包含 ‘(*)’，则以下方法会根据输入进行过滤：

¥You can customize the filtering method by specifying the filter-method prop. The method below filters by input if it also has ‘(*)’:

Nodes 模型结构(Nodes model structure)

¥Nodes model structure

以下描述了 QTree 的 v-model 所考虑的节点属性。

¥The following describes a node’s properties that are taken into account by QTree’s v-model.

Node 属性	类型	不存在时的行为	描述
<nodeKey>	字符串，数字	生成错误	节点的键。键从 `nodeKey` 属性中指定的键中选择。
label	字符串	该项目没有标签	节点的标签。设置 `labelKey` 属性后，将从该键中选择标签。
icon	字符串	使用默认图标	节点的图标。
iconColor	字符串	使用继承的颜色	节点的图标颜色。一个来自 Quasar Color Palette 的示例。
img	字符串	不显示图片	节点的图片。使用 /public 文件夹。示例：‘mountains.png’
avatar	字符串	不显示头像	Node 的头像。使用 /public 文件夹。示例：‘boy-avatar.png’
children	数组	此节点没有子节点	节点数组作为子节点。
disabled	布尔值	节点已启用	node 是否已禁用？
expandable	布尔值	节点可扩展	node 是否可扩展？
selectable	布尔值	节点可选	node 是否可选？
handler	函数	无需调用任何额外函数	点击节点时应调用的自定义函数。接收 `node` 作为参数。
tickable	布尔值	该节点可根据勾选策略勾选	使用勾选策略时，每个节点都会显示一个复选框。是否应该禁用节点的复选框？
noTick	布尔值	Node 显示复选框	使用勾选策略时，节点是否应该显示复选框？
tickStrategy	字符串	使用勾选策略 ‘none’	仅覆盖此节点的全局 tick 策略。‘leaf’、‘leaf-filtered’、‘strict’、‘none’ 之一。
lazy	布尔值	子元素不会被延迟加载	是否应该延迟加载子节点？在这种情况下，也不要指定 ‘children’ 属性。
header	字符串	已使用插槽 ‘default-header’	Node 头作用域插槽名称，无需必需的 ‘header-’ 前缀。示例：‘story’ 指的是 ‘header-story’ 作用域插槽。
body	字符串	已使用插槽 ‘default-body’	Node 主体作用域插槽名称，无需必需的 ‘body-’ 前缀。示例：‘story’ 指的是 ‘body-story’ 作用域插槽。

1. Introduction

2. QTree API

3. 用法(Usage)

3.1. 基本(Basic)

3.2. 无连接线(No connector lines)

3.3. 密集 (Dense )

3.4. 强制暗黑模式(Force dark mode)

3.5. 性能考虑 (Perf considerations )

3.6. 集成示例(Integrated example)

3.7. 自定义内容(Customize content)

3.8. 折叠、过滤和可选(Accordion, filtering and selectable)

3.9. 延迟加载(Lazy loading)

3.10. 选择 vs. 勾选、扩展(Selection vs ticking, expansion)

3.11. 勾选策略(Tick strategy)

3.12. 自定义过滤方式(Custom filter method)

3.13. Nodes 模型结构(Nodes model structure)