TreeSelect

Rules

Basic Example

const rule = {
    type:"treeSelect",
    title:"Tree Selection",
    field:"treeSelect",
    value:[],
    props:{
        treeData:[
            {
                label: 'Node1',
                value: '0-0',
                children: [
                    {
                        label: 'Child Node1',
                        value: '0-0-0',
                    },
                ],
            },
            {
                label: 'Node2',
                value: '0-1',
                children: [
                    {
                        label: 'Child Node3',
                        value: '0-1-0',
                        disabled: true,
                    },
                    {
                        label: 'Child Node4',
                        value: '0-1-1',
                    },
                    {
                        label: 'Child Node5',
                        value: '0-1-2',
                    },
                ],
            },
        ]
    }
}

Props Configuration Examples

Multiple Selection

const rule = {
    type:"treeSelect",
    title:"Product Category",
    field:"categories",
    value:[],
    props:{
        treeData:[{
            label: 'Electronics',
            value: 'electronics',
            children: [
                { label: 'Phone', value: 'phone' },
                { label: 'Computer', value: 'computer' },
            ]
        }],
        multiple: true,
        placeholder: "Select category",
    }
}

Searchable

const rule = {
    type:"treeSelect",
    title:"Location",
    field:"address",
    value:[],
    props:{
        treeData:[{
            label: 'Beijing',
            value: 'beijing',
            children: [
                { label: 'Forbidden City', value: 'gugong' },
            ]
        }],
        showSearch: true,
        placeholder: "Select or search for an area",
    }
}

Show Checkbox

const rule = {
    type:"treeSelect",
    title:"Permission Selection",
    field:"permissions",
    value:[],
    props:{
        treeData:[{
            label: 'User Management',
            value: 'user',
            children: [
                { label: 'View', value: 'view' },
                { label: 'Edit', value: 'edit' },
            ]
        }],
        treeCheckable: true,
        multiple: true,
        placeholder: "Select permissions",
    }
}

Events Examples

Listen to Selection Changes

const rule = {
    type:"treeSelect",
    title:"Location",
    field:"address",
    value:[],
    props:{
        treeData:[{
            label: 'Beijing',
            value: 'beijing',
            children: [
                { label: 'Forbidden City', value: 'gugong' },
            ]
        }],
        placeholder: "Select area",
        allowClear: true,
    },
    on: {
        change: (value, label, extra) => {
            console.log('Selection value changed:', value, label, extra);
        },
        search: (value) => {
            console.log('Search:', value);
        },
        select: (value, node, extra) => {
            console.log('Select node:', value, node, extra);
        },
    },
}

Complete configuration items: Ant-design-vue_TreeSelect

Props

Parameter	Description	Type	Default
allowClear	Show clear button	boolean	false
defaultValue	Specify default selected item	string/string[]	-
disabled	Whether disabled	boolean	false
popupClassName	className attribute of dropdown menu	string	-
dropdownMatchSelectWidth	Dropdown menu and selector have the same width. By default, min-width will be set, which will be ignored when the value is less than the selector width. false will disable virtual scrolling	boolean | number	true
dropdownStyle	Style of dropdown menu	object	-
fieldNames	Replace label,value,children fields in treeNode with corresponding fields in treeData	object	{children:'children', label:'title', value: 'value' }
filterTreeNode	Whether to filter based on input items, default uses value of treeNodeFilterProp as property value of TreeNode to filter	boolean|Function(inputValue: string, treeNode: TreeNode) (function needs to return bool value)	Function
getPopupContainer	Parent node for menu rendering. Default renders to body. If you encounter menu scroll positioning issues, try changing to scroll area and position relative to it.	Function(triggerNode)	() => document.body
labelInValue	Whether to wrap each option's label into value, will change value type from string to {value: string, label: VNode, halfChecked(treeCheckStrictly effective): string[] } format	boolean	false
listHeight	Set popup scroll height	number	256
loadData	Asynchronously load data	function(node)	-
maxTagCount	Maximum number of tags to display	number	-
maxTagPlaceholder	Content displayed when tags are hidden	slot/function(omittedValues)	-
multiple	Support multiple selection (automatically becomes true when treeCheckable is set)	boolean	false
notFoundContent	Content displayed when dropdown list is empty	slot	Not Found
placeholder	Default text of selector	string|slot	-
placement	Position where selector pops up	bottomLeft bottomRight topLeft topRight	bottomLeft
replaceFields	Replace label,value,key,children fields in treeNode with corresponding fields in treeData	object	{children:'children', label:'title', key:'key', value: 'value' }
searchPlaceholder	Default text of search box	string|slot	-
searchValue	Value of search box, can get user input through search event	string	-
showCheckedStrategy	Define how selected items are backfilled. TreeSelect.SHOW_ALL: Show all selected nodes (including parent nodes). TreeSelect.SHOW_PARENT: Only show parent node (when all child nodes under parent are selected). Default only shows child nodes.	enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD }	TreeSelect.SHOW_CHILD
showSearch	Display search box in dropdown (only effective in single selection mode)	boolean	false
size	Selector size, options: large small	string	'default'
status	Set validation status	'error' | 'warning'	-
suffixIcon	Custom suffix icon for selector	VNode | slot	-
tagRender	Custom tag content, effective in multiple selection	slot	-
title	Custom title	slot
treeCheckable	Show checkbox	boolean	false
treeCheckStrictly	In checkable state, node selection is fully controlled (parent and child node selection states are no longer related), will force labelInValue to be true	boolean	false
treeData	treeNodes data, if set then no need to manually construct TreeNode nodes (value is unique within entire tree)	array<{value, label, children, [disabled, disableCheckbox, selectable]}>	[]
treeDataSimpleMode	Use simple format treeData, specific settings refer to settable types (at this time treeData should become data structure like: [{id:1, pId:0, value:'1', label:"test1",...},...], pId is parent node's id)	false|Array<{ id: string, pId: string, rootPId: null }>	false
treeDefaultExpandAll	Expand all tree nodes by default	boolean	false
treeDefaultExpandedKeys	Default expanded tree nodes	string[] | number[]	-
treeExpandedKeys	Set expanded tree nodes	string[] | number[]	-
treeIcon	Whether to display icon before TreeNode title, no default style, if set to true, need to define icon related styles yourself	boolean	false
treeLine	Whether to display line style, please refer to Tree - showLine	boolean | object	false
treeLoadedKeys	(Controlled) Already loaded nodes, need to use with loadData	string[]	[]
treeNodeFilterProp	treeNode property corresponding to input item filter	string	'value'
treeNodeLabelProp	Set as displayed prop	string	'title'
virtual	Set false to disable virtual scrolling	boolean	true

Events

Event Name	Description	Callback Parameters
change	Called when tree node is selected or input value changes	function(value, label, extra)
dropdownVisibleChange	Callback when dropdown menu expands	function(open)
search	Callback when text box value changes	function(value: string)
select	Called when tree node is selected	function(value, node, extra)
treeExpand	Called when tree node expands	function(expandedKeys)

TreeNode props

Parameter	Description	Type	Default
checkable	When tree is checkable, set whether independent node displays Checkbox	boolean	-
disableCheckbox	Disable checkbox	boolean	false
disabled	Whether disabled	boolean	false
isLeaf	Whether is leaf node	boolean	false
key	This must be set (value is unique within entire tree)	string | number	-
selectable	Whether selectable	boolean	true
title	Content displayed by tree node	string|slot	'---'
value	Default filter based on this property value (value is unique within entire tree)	string	-