树形控件 | Quasar Framework

树形控件

Quasar Tree 是一个高度可定制的用于展示带层级数据的组件，例如树状结构的目录。

用法

基础

没有连接线

紧凑的
v2.2.4+

强制暗色模式

性能考虑
v2.9.2+

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

<q-tree no-transition ...

集成示例

更多信息：QSplitter，QTabPanels。

自定义内容

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

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

WARNING

在自定义头部上点击或按下 SPACE 或 ENTER 会选中树的选项（并且自定义头部会失焦）。

如果您不想要这个行为，只需要使用 <div @click.stop @keypress.stop> 包裹自定义头部的内容即可（或者添加监听事件到相应的组件/元素）。

手风琴、筛选和可选中的

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

懒加载

选中 vs 打勾，展开

选中（通过 QTree 的 selected 属性）指向当前选中的节点（背景颜色会有不同的高亮）。
打勾（通过 QTree 的 ticked 属性）指向与每个节点关联的复选框。
展开（通过 QTree 的 expanded 属性）指向已经展开的节点。

为了保证组件正确工作，上述属性都需要使用 v-model:<prop_name> 指令进行动态绑定（示例：v-model:expanded）。

勾选策略

有三种勾选策略：‘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 文件夹。示例：‘mountains.png’
avatar	String	不显示头像	节点的头像。使用 /public 文件夹。示例：‘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’ 作用域插槽。

发现错误？在浏览器中编辑此页

1. Introduction

2. QTree API

3. 用法

3.1. 基础

3.2. 没有连接线

3.3. 紧凑的

3.4. 强制暗色模式

3.5. 性能考虑

3.6. 集成示例

3.7. 自定义内容

3.8. 手风琴、筛选和可选中的

3.9. 懒加载

3.10. 选中 vs 打勾，展开

3.11. 勾选策略

3.12. 自定义筛选方法

3.13. 节点模型结构

用法

基础