Quasar树代表一个高度可配置的组件,用于显示分层数据,如树结构的目录。

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

基础

Basic

无连接线

No connectors

暗色

Dark

综合实例

With QSplitter and QTabPanels

更多信息:QSplitterQTabPanels

自定义内容

注意(在下面的示例中)默认的头部和主体插槽自定义内容。

Default header and body slots

注意(在下面的示例中)自定义头部和主体插槽。

Customizing nodes

WARNING

在自定义头部上单击或按SPACEENTER以选择树的项目(自定义头部是模糊的)。

如果您不希望发生这种情况,只需将自定义头部的内容包裹在<div @click.stop @keyup.13.32.stop>

手风琴、过滤和可选

在下面的示例中,当一个节点在扩展时同级节点会收缩。

Accordion mode
Filtering nodes
Selectable nodes

延迟加载

Lazy loading nodes

选择与勾选、扩展

  • 选择(通过QTreeselected属性)是指当前选择的节点(以不同背景突出显示)。
  • 勾选(通过QTreeticked属性)是指与每个节点关联的复选框。
  • 扩展(通过QTreeexpanded属性)是指被扩展的节点。

上面的所有属性都必须使用.sync修饰符进行动态绑定,以使其正常工作(v-bind:<prop_name>.sync:<prop_name>.sync)。

Syncing node properties

勾选策略

共有三个勾选策略:‘leaf’、‘leaf-filtered’、‘strict’ 以及附加的(并且默认)禁用勾选的’none’。

策略描述
leaf勾选的节点只是叶子节点。 勾选节点也会影响父级的勾选状态(父级会部分勾选或勾选),以及其子级(所有可勾选的子级也会被勾选)。
leaf-filteredleaf具有相同的概念,只是该策略仅适用于过滤后的节点(过滤后仍可见的节点)。
strict勾选节点独立于父级或子级勾选状态。

您可以为QTree应用全局勾选策略,并通过在nodes模型中指定tickStrategy以局部更改特定节点的勾选策略。

Tick strategy

自定义过滤方法

您可以通过指定filter-method属性来自定义过滤方法。 如果下面的方法也具有’(*)’,则按输入值进行过滤:

Custom filter

QTree API

Loading API...
Please wait...

节点模型结构

下面描述了QTree的v-model可选的节点属性。

节点属性类型不存在时的行为描述
<nodeKey>String, Number产生错误节点的键值。 该键值是从nodeKey属性中指定的键值中选取的。
labelString该项没有标签节点的标签。 当设置了labelKey属性时,将从该键中拾取标签。
iconString使用默认图标节点的图标。
iconColorString用继承的颜色节点的图标颜色。 Quasar调色板中的一种。
imgString没有图像显示节点的图像。使用静态文件夹。示例:“statics/mountains.png”
avatarString没有头像显示节点的头像。使用静态文件夹。示例:“statics/boy-avatar.png”
childrenArray此节点没有子节点节点数组作为子节点
disabledBoolean节点已启用节点是否禁用?
expandableBoolean节点可扩展节点是否可扩展?
selectableBoolean节点是可选的节点可选吗?
handlerFunction没有额外的功能被调用单击节点时应调用的自定义函数。接收node作为参数。
tickableBoolean节点可以根据勾选策略进行勾选使用勾选策略时,每个节点都会显示一个复选框。是否应禁用节点的复选框?
noTickBoolean节点显示一个复选框使用勾选策略时,节点应显示一个复选框吗?
tickStrategyString勾选策略’none’被使用仅对此节点覆盖全局勾选策略。‘leaf’、‘leaf-filtered’、‘strict’、'none’之一。
lazyBoolean子节点没有延迟加载子节点应该延迟加载吗? 在这种情况下,也不要指定“children”属性。
headerString插槽“default-header”被使用节点头部作用域的插槽名称,不带必需的“header-”前缀。 示例:“story”是指“header-story”作用域的插槽。
bodyString插槽“default-body”被使用节点主体作用域的插槽名称,没有必需的“body-”前缀。 示例: “story”是“body-story”作用域的插槽。