Tree

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

QTree API

Loading QTree API...

用法

基础

没有连接线

紧凑的
v2.2.4+

黑色模式

集成示例

更多信息：QSplitter， QTabPanels。

自定义内容

注意下面的示例中，使用 header 和 body 的默认插槽实现了自定义内容。

注意下面的示例中，使用 header 和 body 插槽实现了自定义内容。

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 的 model 中声明 tickStrategy 属性来修改某个特殊节点的勾选策略。

自定义筛选方法

您可以通过 filter-method 属性来自定义筛选方法。下面的示例中，使用输入框中的数据和节点标签中的 ‘(*)’ 作为筛选条件：

节点的模型结构

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

属性类型不存在时的行为描述
<nodeKey>String, Number生成一个错误节点的 key，key 将会从 nodeKey 属性声明的字段中获取
labelString该项没有标签节点的标签，如果设置了 labelKey 属性，那么将使用对应的字段。
iconString使用默认图标节点的图标。
iconColorString使用继承来的颜色节点图标的颜色，是 Quasar 调色盘其中之一。
imgString不展示图片节点的图片，使用 /public 目录下的图片，例如：‘mountains.png’。
avatarString不显示头像节点的头像，使用 /public 目录下的图片，例如：‘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 插槽的名称，不需要 ‘body-’ 前缀。示例：‘story’ 指向 ‘body-story’ 插槽。

类型定义

查看类型定义
/**
 * Node type to be used with QTree's `nodes` prop
 *
 * @see https:
 *
 * @template TExtra Object type to add extra properties for the node, overrides the existing ones as well
 *
 * @example
 * Basic usage
 * ```ts
 * const nodes: QTreeNode[] = [
 *   
 * ];
 * 
 * ```
 *
 * @example
 * Making some properties required
 * ```ts
 * 
 * const nodes: QTreeNode<{ label: string; icon: string }>[] = [
 *   
 * ];
 * ```
 *
 * @example
 * Adding extra properties
 * ```ts
 * 
 * const nodes: QTreeNode<{ foo: number }>[] = [
 *   
 * ];
 * ```
 *
 * @example
 * Using different label/children properties
 * ```ts
 * type Node = QTreeNode<{ name: string; subNodes: Node[] }>;
 * const nodes: Node[] = [
 *   
 * ];
 * 
 * ```
 *
 * @example
 * Using a different child node type
 * ```ts
 * type ChildNode = QTreeNode<{ foo: number }>;
 * type ParentNode = QTreeNode<{ bar: string; children?: ChildNode[] }>;
 *
 * const nodes: ParentNode[] = [
 *   
 * ];
 * ```
 *
 * @example
 * A very basic file system tree
 * ```ts
 * interface FileInfo {
 *   path: string;
 *   size: number;
 *   lastModified: number;
 * }
 * type FileNode = QTreeNode<FileInfo & { type: "file", children?: never }>;
 * type DirectoryNode = QTreeNode<FileInfo & { type: "directory", children?: (FileNode | DirectoryNode)[] }>;
 *
 * const nodes: DirectoryNode[] = [
 *   {
 *     type: "directory",
 *     path: "/",
 *     size: 0,
 *     lastModified: 0,
 *     
 *     children: [
 *       {
 *         type: "file",
 *         path: "/foo.txt",
 *         size: 100,
 *         lastModified: 1000,
 *         
 *       },
 *       {
 *         type: "directory",
 *         path: "/bar",
 *         size: 0,
 *         lastModified: 0,
 *         
 *       }
 *     ]
 *   }
 * ]
 * ```
 */
export type QTreeNode<TExtra = unknown> = Omit<
  {
    label?: string;
    icon?: string;
    iconColor?: string;
    img?: string;
    avatar?: string;
    children?: QTreeNode<TExtra>[];
    disabled?: boolean;
    expandable?: boolean;
    selectable?: boolean;
    handler?: (node: QTreeNode<TExtra>) => void;
    tickable?: boolean;
    noTick?: boolean;
    tickStrategy?: "leaf" | "leaf-filtered" | "string" | "none";
    lazy?: boolean;
    header?: string;
    body?: string;
  },
  unknown extends TExtra ? "" : keyof TExtra
> &
  (unknown extends TExtra ? Record<string, any> : TExtra);

export interface QTreeLazyLoadParams<
  Node extends QTreeNode = QTreeNode,
  UpdatedNodes extends QTreeNode = Node,
> {
  node: Node;
  key: string;
  done: (nodes: UpdatedNodes[]) => void;
  fail: () => void;
}
查看更多？
Vue 组件
Tooltip 悬浮提示
Vue 组件
Uploader 上传
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。