树 | Quasar Framework 中文网

树

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

QTree API

用法

基础

无连接线
v1.5.10+

稠密
v1.17+

暗色

综合实例

更多信息：QSplitter、QTabPanels。

自定义内容

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

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

WARNING

在自定义头部上单击或按SPACE或ENTER以选择树的项目（自定义头部是模糊的）。

如果您不希望发生这种情况，只需将自定义头部的内容包裹在<div @click.stop @keypress.stop> (或者将侦听器添加到发出它们的相应组件/元素)中。

手风琴、过滤和可选

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

延迟加载

选择与勾选、扩展

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

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

勾选策略

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

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

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

自定义过滤方法

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

节点模型结构

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

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

阅读更多?