ant-design-vue/components/tree/index.en-US.md

5.9 KiB

category type title cover
Components Data Display Tree https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg

A hierarchical list structure component.

When To Use

Almost anything can be represented in a tree structure. Examples include directories, organization hierarchies, biological classifications, countries, etc. The Tree component is a way of representing the hierarchical relationship between these things. You can also expand, collapse, and select a treeNode within a Tree.

API

Tree props

Property Description Type Default Version
autoExpandParent Whether to automatically expand a parent treeNode boolean true
blockNode Whether treeNode fill remaining horizontal space boolean false
checkable Adds a Checkbox before the treeNodes boolean false
checkedKeys(v-model) (Controlled) Specifies the keys of the checked treeNodes (PS: When this specifies the key of a treeNode which is also a parent treeNode, all the children treeNodes of will be checked; and vice versa, when it specifies the key of a treeNode which is a child treeNode, its parent treeNode will also be checked. When checkable and checkStrictly is true, its object has checked and halfChecked property. Regardless of whether the child or parent treeNode is checked, they won't impact each other. string[] | number[] | {checked: string[] | number[], halfChecked: string[] | number[]} []
checkStrictly Check treeNode precisely; parent treeNode and children treeNodes are not associated boolean false
defaultExpandAll Whether to expand all treeNodes by default boolean false
disabled whether disabled the tree bool false
draggable Specifies whether this Tree is draggable (IE > 8) boolean false
expandedKeys(v-model) (Controlled) Specifies the keys of the expanded treeNodes string[] | number[] []
fieldNames Replace the title,key and children fields in treeNode with the corresponding fields in treeData object { children:'children', title:'title', key:'key' } 3.0.0
filterTreeNode Defines a function to filter (highlight) treeNodes. When the function returns true, the corresponding treeNode will be highlighted function(node) -
loadData Load data asynchronously function(node) -
loadedKeys (Controlled) Set loaded tree nodes. Need work with loadData string[] | number[] []
multiple Allows selecting multiple treeNodes boolean false
selectable whether can be selected boolean true
selectedKeys(v-model) (Controlled) Specifies the keys of the selected treeNodes string[] | number[] -
showIcon Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to true boolean false
showLine Shows a connecting line boolean | {showLeafIcon: boolean}(3.0+) false
switcherIcon customize collapse/expand icon of tree node slot -
title custom title slot 2.0.0
treeData treeNode of tree, please use treeNodes before v1.1.4 TreeNode[] -
virtual Disable virtual scroll when set to false boolean true 3.0

Events

Events Name Description Arguments
check Callback function for when the onCheck event occurs function(checkedKeys, e:{checked: bool, checkedNodes, node, event})
dragend Callback function for when the onDragEnd event occurs function({event, node})
dragenter Callback function for when the onDragEnter event occurs function({event, node, expandedKeys})
dragleave Callback function for when the onDragLeave event occurs function({event, node})
dragover Callback function for when the onDragOver event occurs function({event, node})
dragstart Callback function for when the onDragStart event occurs function({event, node})
drop Callback function for when the onDrop event occurs function({event, node, dragNode, dragNodesKeys})
expand Callback function for when a treeNode is expanded or collapsed function(expandedKeys, {expanded: bool, node})
load Callback function for when a treeNode is loaded function(loadedKeys, {event, node})
rightClick Callback function for when the user right clicks a treeNode function({event, node})
select Callback function for when the user clicks a treeNode function(selectedKeys, e:{selected: bool, selectedNodes, node, event})

TreeNode

Property Description Type Default Version
checkable When Tree is checkable, set TreeNode display Checkbox or not boolean -
class className string -
disableCheckbox Disables the checkbox of the treeNode boolean false
disabled Disables the treeNode boolean false
icon customize icon. When you pass component, whose render will receive full TreeNode props as component props slot|slot-scope -
isLeaf Determines if this is a leaf node(effective when loadData is specified) boolean false
key Used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. P.S.: It must be unique in all of treeNodes of the tree! string | number internal calculated position of treeNode
selectable Set whether the treeNode can be selected boolean true
style style string|object -
title Title string '---'

DirectoryTree props

Property Description Type Default
expandAction Directory open logic, optional false 'click' 'dblclick' string click

FAQ

How to hide file icon when use showLine?

File icon realize by using switcherIcon. You can overwrite the style to hide it