quasar

{ "type": "component", "meta": { "docsUrl": "https://v1.quasar.dev/vue-components/tree" }, "props": { "nodes": { "type": "Array", "desc": "The array of nodes that designates the tree structure", "required": true, "examples": [ "[ {...}, {...} ]" ], "category": "content" }, "node-key": { "type": "String", "desc": "The property name of each node object that holds a unique node id", "required": true, "examples": [ "key", "id" ], "category": "content" }, "label-key": { "type": "String", "desc": "The property name of each node object that holds the label of the node", "default": "label", "examples": [ "name", "description" ], "category": "content" }, "children-key": { "type": "String", "desc": "The property name of each node object that holds the list of children of the node", "default": "children", "examples": [ "roles", "relatives" ], "category": "content", "addedIn": "v1.11.3" }, "no-connectors": { "type": "Boolean", "desc": "Do not display the connector lines between nodes", "category": "style", "addedIn": "v1.5.10" }, "color": { "type": "String", "desc": "Color name for component from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "style" }, "control-color": { "type": "String", "desc": "Color name for controls (like checkboxes) from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "style" }, "text-color": { "type": "String", "desc": "Overrides text color (if needed); Color name from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "style" }, "selected-color": { "type": "String", "desc": "Color name for selected nodes (from the Quasar Color Palette)", "examples": [ "primary", "teal-10" ], "category": "style" }, "dark": { "type": "Boolean", "desc": "Notify the component that the background is a dark color", "category": "style" }, "icon": { "type": "String", "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix", "examples": [ "map", "ion-add", "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg", "img:statics/path/to/some_image.png" ], "category": "content" }, "tick-strategy": { "type": "String", "desc": "The type of strategy to use for the selection of the nodes", "default": "none", "values": [ "none", "strict", "leaf", "leaf-filtered" ], "category": "behavior" }, "ticked": { "type": "Array", "desc": "Keys of nodes that are ticked", "sync": true, "examples": [ ":ticked.sync=\"tickedKeys\"" ], "category": "state" }, "expanded": { "type": "Array", "desc": "Keys of nodes that are expanded", "sync": true, "examples": [ ":expanded.sync=\"expandedKeys\"" ], "category": "state" }, "selected": { "type": "Any", "desc": "Key of node currently selected", "sync": true, "examples": [ ":selected.sync=\"selectedKey\"" ], "category": "state" }, "default-expand-all": { "type": "Boolean", "desc": "Allow the tree to have all its branches expanded, when first rendered", "category": "behavior" }, "accordion": { "type": "Boolean", "desc": "Allows the tree to be set in accordion mode", "category": "behavior" }, "filter": { "type": "String", "desc": "The text value to be used for filtering nodes", "examples": [ ":filter=\"searchText\"" ], "category": "filter" }, "filter-method": { "type": "Function", "desc": "The function to use to filter the tree nodes; For best performance, reference it from your scope and do not define it inline", "default": "(see source code)", "params": { "node": { "type": "Object", "desc": "Node currently being filtered" }, "filter": { "type": "String", "desc": "Filter text to match against" } }, "returns": { "type": "Boolean", "desc": "Matches or not" }, "category": "filter" }, "duration": { "type": "Number", "desc": "Toggle animation duration (in milliseconds)", "default": 300, "examples": [ ":duration=\"500\"" ], "category": "style" }, "no-nodes-label": { "type": "String", "desc": "Override default such label for when no nodes are available", "examples": [ "No nodes to show!" ], "category": "content" }, "no-results-label": { "type": "String", "desc": "Override default such label for when no nodes are available due to filtering", "examples": [ "No results" ], "category": "content" } }, "scopedSlots": { "default-header": { "desc": "Slot to use for defining the header of a node", "scope": { "expanded": { "type": "Boolean", "desc": "Is node expanded? Can directly be assigned new Boolean value which changes expanded state", "reactive": true }, "ticked": { "type": "Boolean", "desc": "Is node ticked? Can directly be assigned new Boolean value which changes ticked state", "reactive": true }, "tree": { "type": "Object", "desc": "QTree instance" }, "node": { "type": "Object", "desc": "Node object" }, "key": { "type": "Any", "desc": "Node's key" }, "color": { "type": "String", "desc": "QTree instance 'color' supplied prop value", "examples": [ "primary" ] }, "dark": { "type": "Boolean", "desc": "QTree instance 'dark' supplied prop value" } } }, "header-[name]": { "desc": "Header template slot for describing node header; Used by nodes which have their 'header' prop set to '[name]', where '[name]' can be any string", "scope": { "expanded": { "type": "Boolean", "desc": "Is node expanded? Can directly be assigned new Boolean value which changes expanded state", "reactive": true }, "ticked": { "type": "Boolean", "desc": "Is node ticked? Can directly be assigned new Boolean value which changes ticked state", "reactive": true }, "tree": { "type": "Object", "desc": "QTree instance" }, "node": { "type": "Object", "desc": "Node object" }, "key": { "type": "Any", "desc": "Node's key" }, "color": { "type": "String", "desc": "QTree instance 'color' supplied prop value", "examples": [ "primary" ] }, "dark": { "type": "Boolean", "desc": "QTree instance 'dark' supplied prop value" } } }, "default-body": { "desc": "Slot to use for defining the body of a node", "scope": { "expanded": { "type": "Boolean", "desc": "Is node expanded? Can directly be assigned new Boolean value which changes expanded state", "reactive": true }, "ticked": { "type": "Boolean", "desc": "Is node ticked? Can directly be assigned new Boolean value which changes ticked state", "reactive": true }, "tree": { "type": "Object", "desc": "QTree instance" }, "node": { "type": "Object", "desc": "Node object" }, "key": { "type": "Any", "desc": "Node's key" }, "color": { "type": "String", "desc": "QTree instance 'color' supplied prop value", "examples": [ "primary" ] }, "dark": { "type": "Boolean", "desc": "QTree instance 'dark' supplied prop value" } } }, "body-[name]": { "desc": "Body template slot for describing node body; Used by nodes which have their 'body' prop set to '[name]', where '[name]' can be any string", "scope": { "expanded": { "type": "Boolean", "desc": "Is node expanded? Can directly be assigned new Boolean value which changes expanded state", "reactive": true }, "ticked": { "type": "Boolean", "desc": "Is node ticked? Can directly be assigned new Boolean value which changes ticked state", "reactive": true }, "tree": { "type": "Object", "desc": "QTree instance" }, "node": { "type": "Object", "desc": "Node object" }, "key": { "type": "Any", "desc": "Node's key" }, "color": { "type": "String", "desc": "QTree instance 'color' supplied prop value", "examples": [ "primary" ] }, "dark": { "type": "Boolean", "desc": "QTree instance 'dark' supplied prop value" } } } }, "events": { "update:expanded": { "desc": "Triggered when nodes are expanded or collapsed; Used by Vue on 'update' synched prop", "params": { "expanded": { "type": "Array", "desc": "The expanded node keys", "examples": [ "[ 'Node 1', 'Node 2' ]" ] } } }, "lazy-load": { "desc": "Emitted when the lazy loading of nodes is finished", "params": { "details": { "type": "Object", "desc": "Lazy loading details", "definition": { "node": { "type": "Object", "desc": "The node to which the new nodes (the children) will be appended" }, "key": { "type": "String", "desc": "The key of the node getting the newly loaded child nodes", "examples": [ "New Node" ] }, "done": { "type": "Function", "desc": "The callback to be carried out when the loading is successful", "params": { "children": { "type": "Array", "desc": "Array of nodes" } }, "returns": null }, "fail": { "type": "Function", "desc": "The callback to be carried out should the loading fails", "params": null, "returns": null } } } } }, "update:ticked": { "desc": "Emitted when nodes are ticked/unticked via the checkbox; Used by Vue on 'ticked' synched prop", "params": { "target": { "type": "Array", "desc": "The ticked node keys", "examples": [ "[ 'Node 1', 'Node 2' ]" ] } } }, "update:selected": { "desc": "Emitted when selected node changes; Used by Vue on 'selected' synched prop", "params": { "target": { "type": "Any", "desc": "The selected node key", "examples": [ "Node 1" ] } } }, "after-show": { "desc": "Emitted when component show animation is finished", "addedIn": "v1.9.0" }, "after-hide": { "desc": "Emitted when component hide animation is finished", "addedIn": "v1.9.0" } }, "methods": { "getNodeByKey": { "desc": "Get the node with the given key", "params": { "key": { "type": "Any", "desc": "The key of a node", "required": true, "examples": [ "Node 1" ] } }, "returns": { "type": "Object", "desc": "Requested node" } }, "getTickedNodes": { "desc": "Get array of nodes that are ticked", "returns": { "type": "Array", "desc": "Ticked node objects" } }, "getExpandedNodes": { "desc": "Get array of nodes that are expanded", "returns": { "type": "Array", "desc": "Expanded node objects" } }, "isExpanded": { "desc": "Determine if a node is expanded", "params": { "key": { "type": "Any", "desc": "The key of a node", "required": true, "examples": [ "Node 1" ] } }, "returns": { "type": "Boolean", "desc": "Is specified node expanded?" } }, "expandAll": { "desc": "Use to expand all branches of the tree" }, "collapseAll": { "desc": "Use to collapse all branches of the tree" }, "setExpanded": { "desc": "Expands the tree at the point of the node with the key given", "params": { "key": { "type": "Any", "desc": "The key of a node", "required": true, "examples": [ "Node 1" ] }, "state": { "type": "Boolean", "desc": "Set to 'true' to expand the branch of the tree, otherwise 'false' collapses it", "required": true } } }, "isTicked": { "desc": "Method to check if a node's checkbox is selected or not", "params": { "key": { "type": "Any", "desc": "The key of a node", "required": true, "examples": [ "Node 1" ] } }, "returns": { "type": "Boolean", "desc": "Is specified node ticked?" } }, "setTicked": { "desc": "Method to set a node's checkbox programmatically", "params": { "keys": { "type": "Array", "desc": "The keys of nodes to tick/untick", "required": true, "examples": [ "[ 'Node 1', 'Node 2' ]" ] }, "state": { "type": "Boolean", "desc": "Set to 'true' to tick the checkbox of nodes, otherwise 'false' unticks them", "required": true } } } } }