Tree Tree Component

Rules

Basic Example

const rule = {
    type:"tree",
    title:"Permissions",
    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 Users' },
                { id: 12, title: 'Edit Users' },
            ]
        }],
        props: {
            label: "title",
            children: "children"
        },
        showCheckbox: true,
        nodeKey: "id",
    }
}

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",
            children: "children"
        },
        defaultExpandAll: true,
        nodeKey: "id",
    }
}

Lazy Loading

const rule = {
    type:"tree",
    title:"File Tree",
    field:"files",
    value:[],
    props:{
        props: {
            label: "name",
            children: "children"
        },
        lazy: true,
        load: function(node, resolve) {
            // Dynamically load child nodes
            if (node.level === 0) {
                resolve([
                    { name: 'Folder 1', id: 1, isLeaf: false },
                    { name: 'Folder 2', id: 2, isLeaf: false },
                ]);
            } else {
                resolve([
                    { name: 'File 1.txt', id: 11, isLeaf: true },
                    { name: 'File 2.txt', id: 12, isLeaf: true },
                ]);
            }
        },
        nodeKey: "id",
    }
}

Draggable

const rule = {
    type:"tree",
    title:"Menu Sorting",
    field:"menus",
    value:[],
    props:{
        data:[{
            id: 1,
            title: 'Menu 1',
            children: [
                { id: 11, title: 'Submenu 1' },
            ]
        }],
        props: {
            label: "title",
            children: "children"
        },
        draggable: true,
        nodeKey: "id",
    }
}

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 Users' },
            ]
        }],
        props: {
            label: "title",
            children: "children"
        },
        showCheckbox: true,
        nodeKey: "id",
    },
    on: {
        'check': (data, checked) => {
            console.log('Node selection state changed:', data, checked);
        },
        'node-click': (data, node) => {
            console.log('Node clicked:', data, node);
        },
        'node-expand': (data, node) => {
            console.log('Node expanded:', data, node);
        },
        'node-collapse': (data, node) => {
            console.log('Node collapsed:', data, node);
        },
    },
}

Count Quantity After Selection

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

Full configuration: Element_Tree

value :Array

Props

Parameter	Description	Type	Optional Values	Default Value
data	Display data	array	—	—
emptyText	Text displayed when content is empty	String	—	—
nodeKey	Property used by each tree node as unique identifier. Should be unique across the entire tree	String	—	—
props	Configuration options, see table below	object	—	—
renderAfterExpand	Whether to render child nodes only after expanding a tree node for the first time	boolean	—	true
load	Method to load subtree data. Only effective when lazy property is true	function(node, resolve)	—	—
renderContent	Rendering Function for tree node content area	Function(h, { node, data, store })	—	—
highlightCurrent	Whether to highlight currently selected node. Default is false.	boolean	—	false
defaultExpandAll	Whether to expand all nodes by default	boolean	—	false
expandOnClickNode	Whether to expand or collapse node when clicking node. Default is true. If false, node will only expand or collapse when clicking arrow icon.	boolean	—	true
checkOnClickNode	Whether to select node when clicking node. Default is false, meaning node will only be selected when clicking checkbox.	boolean	—	false
autoExpandParent	Whether to automatically expand parent node when expanding child node	boolean	—	true
defaultExpandedKeys	Array of keys of nodes expanded by default	array	—	—
showCheckbox	Whether nodes can be selected	boolean	—	false
checkStrictly	When checkbox is displayed, whether to strictly follow the practice that parent and child are not mutually associated. Default is false	boolean	—	false
defaultCheckedKeys	Array of keys of nodes checked by default	array	—	—
currentNodeKey	Currently selected node	string, number	—	—
filterNodeMethod	Method executed when filtering tree nodes. Return true to display this node, return false to hide this node	Function(value, data, node)	—	—
accordion	Whether to only open one sibling tree node at a time	boolean	—	false
indent	Horizontal indentation between adjacent level nodes, in pixels	number	—	16
iconClass	Custom icon for tree nodes	string	-	-
lazy	Whether to lazy load child nodes. Must be used together with load method	boolean	—	false
draggable	Whether to enable drag and drop node functionality	boolean	—	false
allowDrag	Determines whether a node can be dragged	Function(node)	—	—
allowDrop	Determine whether target node can accept drop during drag and drop. type parameter has three cases: 'prev', 'inner' and 'next', representing placing before target node, inserting into target node and placing after target node	Function(draggingNode, dropNode, type)	—	—

Porps.props

Parameter	Description	Type	Optional Values	Default Value
label	Specify node label as a property value of node object	string, function(data, node)	—	—
children	Specify subtree as a property value of node object	string	—	—
disabled	Specify whether node checkbox is disabled as a property value of node object	boolean, function(data, node)	—	—
isLeaf	Specify whether node is a leaf node. Only effective when lazy property is specified	boolean, function(data, node)	—	—

data Data Structure

[{
    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
node-click	Callback when node is clicked	Three parameters in order: object corresponding to the node in the array passed to data property, Node corresponding to the node, the node component itself.
node-contextmenu	Triggered when a node is right-clicked	Four parameters in order: event, object corresponding to the node in the array passed to data property, Node corresponding to the node, the node component itself.
check-change	Callback when node selection state changes	Three parameters in order: object corresponding to the node in the array passed to data property, whether the node itself is selected, whether there are selected nodes in the node's subtree
check	Triggered when checkbox is clicked	Two parameters in order: object corresponding to the node in the array passed to data property, current selection state object of the tree, containing four properties: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys
current-change	Event triggered when currently selected node changes	Two parameters: data of current node, Node object of current node
node-expand	Event triggered when node is expanded	Three parameters in order: object corresponding to the node in the array passed to data property, Node corresponding to the node, the node component itself
node-collapse	Event triggered when node is collapsed	Three parameters in order: object corresponding to the node in the array passed to data property, Node corresponding to the node, the node component itself
node-drag-start	Event triggered when node starts dragging	Two parameters in order: Node corresponding to the dragged node, event
node-drag-enter	Event triggered when dragging enters another node	Three parameters in order: Node corresponding to the dragged node, Node corresponding to the entered node, event
node-drag-leave	Event triggered when dragging leaves a node	Three parameters in order: Node corresponding to the dragged node, Node corresponding to the left node, event
node-drag-over	Event triggered when dragging node (similar to browser's mouseover event)	Three parameters in order: Node corresponding to the dragged node, Node corresponding to the currently entered node, event
node-drag-end	Event triggered when drag ends (may not be successful)	Four parameters in order: Node corresponding to the dragged node, the last entered node when drag ends (may be empty), placement position of the dragged node (before, after, inner), event
node-drop	Event triggered when drag is successfully completed	Four parameters in order: Node corresponding to the dragged node, the last entered node when drag ends, placement position of the dragged node (before, after, inner), event