Tree

Rules

Basic Example

const rule = {
    type:"tree",
    title:"Permission",
    field:"rule",
    value:[],
    props:{
        data:[],
        props: {
            label: "title"
        }
    }
}

Props Configuration Examples

Show Checkbox

const rule = {
    type:"tree",
    title:"Permission Selection",
    field:"permissions",
    value:[],
    props:{
        data:[{
            id: 1,
            title: 'User Management',
            children: [
                { id: 11, title: 'View User' },
                { id: 12, title: 'Edit User' },
            ]
        }],
        props: {
            label: "title"
        },
        checkable: true,
    }
}

Expand All Nodes by Default

const rule = {
    type:"tree",
    title:"Product Category",
    field:"categories",
    value:[],
    props:{
        data:[{
            id: 1,
            title: 'Electronics',
            children: [
                { id: 11, title: 'Phone' },
                { id: 12, title: 'Computer' },
            ]
        }],
        props: {
            label: "title"
        },
        defaultExpandAll: true,
    }
}

Lazy Load

const rule = {
    type:"tree",
    title:"File Tree",
    field:"files",
    value:[],
    props:{
        props: {
            label: "title"
        },
        loadData: function(node) {
            // Load child nodes dynamically
            return new Promise((resolve) => {
                if (node.id === '0-0') {
                    setTimeout(() => {
                        resolve([
                            { id: '0-0-0', title: 'File1.txt', isLeaf: true },
                            { id: '0-0-1', title: 'File2.txt', isLeaf: true },
                        ]);
                    }, 1000);
                } else {
                    resolve([]);
                }
            });
        },
    }
}

Events Examples

Listen to Node Selection

const rule = {
    type:"tree",
    title:"Permission Selection",
    field:"permissions",
    value:[],
    props:{
        data:[{
            id: 1,
            title: 'User Management',
            children: [
                { id: 11, title: 'View User' },
            ]
        }],
        props: {
            label: "title"
        },
        checkable: true,
    },
    on: {
        check: (checkedKeys, e) => {
            console.log('Node selection state changed:', checkedKeys, e);
        },
        select: (selectedKeys, e) => {
            console.log('Node selection:', selectedKeys, e);
        },
        expand: (expandedKeys, e) => {
            console.log('Node expand:', expandedKeys, e);
        },
    },
}

Count After Selection

const rule = [
    {
        type:"tree",
        title:"Permission Selection",
        field:"permissions",
        value:[],
        props:{
            data:[{
                id: 1,
                title: 'User Management',
                children: [
                    { id: 11, title: 'View User' },
                    { id: 12, title: 'Edit User' },
                ]
            }],
            props: {
                label: "title"
            },
            checkable: true,
        },
        inject: true,
        on: {
            check: ($inject, checkedKeys) => {
                // Count selected permissions and update field
                $inject.api.setValue('permissionCount', checkedKeys.length);
            },
        },
    },
    {
        type:"input-number",
        field:"permissionCount",
        title:"Selected Permission Count",
        props: {
            disabled: true,
        },
    },
]

Reference: Ant-design-vue_Tree

value :Array

Props

Parameter	Description	Type	Default
blockNode	Whether node occupies one line	boolean	false
treeData	treeNodes data, if set then no need to manually construct TreeNode nodes (key is unique within entire tree)	array<{key, title, children, [disabled, selectable]}>	--
replaceFields	Replace title,key,children fields in treeNode with corresponding fields in treeData	object	{children:'children', title:'title', key:'key' }
autoExpandParent	Whether to automatically expand parent nodes	boolean	true
checkable	Add Checkbox checkbox before node	boolean	false
checkedKeys(v-model)	(Controlled) Tree nodes with checked checkboxes (Note: parent and child nodes are related, if parent node key is passed, child nodes are automatically selected; correspondingly if all child node keys are passed, parent node is also automatically selected. When setting checkable and checkStrictly, it is an object with checked and halfChecked properties, and parent and child node selection is no longer related	string[] | number[] | {checked: string[] | number[], halfChecked: string[] | number[]}	[]
checkStrictly	In checkable state, node selection is fully controlled (parent and child node selection states are no longer related)	boolean	false
defaultCheckedKeys	Default tree nodes with checked checkboxes	string[] | number[]	[]
defaultExpandAll	Expand all tree nodes by default	boolean	false
defaultExpandedKeys	Default expanded specified tree nodes	string[] | number[]	[]
defaultExpandParent	Expand parent nodes by default	bool	true
defaultSelectedKeys	Default selected tree nodes	string[] | number[]	[]
disabled	Disable tree	bool	false
draggable	Set nodes draggable	boolean	false
expandedKeys(.sync)	(Controlled) Expand specified tree nodes	string[] | number[]	[]
filterTreeNode	Filter tree nodes on demand (highlight), return true	function(node)	-
loadData	Asynchronously load data	function(node)	-
loadedKeys	(Controlled) Already loaded nodes, need to use with loadData	string[] | number[]	[]
multiple	Support selecting multiple nodes (node itself)	boolean	false
selectable	Whether selectable	boolean	true
selectedKeys(.sync)	(Controlled) Set selected tree nodes	string[] | number[]	-
showIcon	Whether to display icon before TreeNode title, no default style, if set to true, need to define icon related styles yourself	boolean	false
switcherIcon	Custom expand/collapse icon for tree nodes	slot	-
showLine	Whether to display connection line	boolean	false

Props.props

Parameter	Description	Type	Default
class	Node's class	string	-
style	Node's style	string|object	-
checkable	When tree is checkable, set whether independent node displays Checkbox	boolean	-
disableCheckbox	Disable checkbox	boolean	false
disabled	Disable response	boolean	false
icon	Custom icon. Can receive component, props is current node props	slot|slot-scope	-
isLeaf	Set as leaf node (effective when loadData is set)	boolean	false
key	Used by tree's (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys properties. Note: All node key values in entire tree cannot be duplicated!	string | number	Internally calculated node position
selectable	Set whether node can be selected	boolean	true
title	Title	string|slot|slot-scope	'---'
slots	When using treeNodes, can configure properties that support slot through this property, such as slots: { title: 'XXX'}	object	-
scopedSlots	When using columns, can configure properties that support slot-scope through this property, such as scopedSlots: { title: 'XXX'}	object	-
on	Event object, only effective when using treeNodes, such as {click: () => {}}	object	'---'

data Data Structure

const data = [{
    title: 'parent 1',
    expand: true,
    selected: false,
    id: 1,
    children: [
        {
            title: 'parent 1-1',
            expand: true,
            id:2,
            children: [
                {
                    title: 'leaf 1-1-1',
                    disabled: true,
                    id:11
                },
                {
                    title: 'leaf 1-1-2',
                    selected:true,
                    id:12
                }
            ]
        },
        {
            title: 'parent 1-2',
            expand: true,
            id:3,
            children: [
                {
                    title: 'leaf 1-2-1',
                    checked: true,
                    id:13,
                },
                {
                    title: 'leaf 1-2-1',
                    id:14,
                }
            ]
        }
    ]
}]

Events

Event Name	Description	Callback Parameters
check	Triggered when clicking checkbox	function(checkedKeys, e:{checked: bool, checkedNodes, node, event})
dragend	Called when dragend is triggered	function({event, node})
dragenter	Called when dragenter is triggered	function({event, node, expandedKeys})
dragleave	Called when dragleave is triggered	function({event, node})
dragover	Called when dragover is triggered	function({event, node})
dragstart	Called when starting drag	function({event, node})
drop	Called when drop is triggered	function({event, node, dragNode, dragNodesKeys})
expand	Triggered when expanding/collapsing node	function(expandedKeys, {expanded: bool, node})
load	Triggered when node loading completes	function(loadedKeys, {event, node})
rightClick	Response to right click	function({event, node})
select	Triggered when clicking tree node	function(selectedKeys, e:{selected: bool, selectedNodes, node, event})