Tree

Rules

Basic Example

const rule = {
    type:"tree",
    title:"Permissions",
    field:"rule",
    value:[],
    props:{
        data:[],
        fieldNames: {
            key: 'id',
            title: 'title',
            children: 'children'
        }
    }
}

Props Configuration Examples

Checkable Tree

const rule = {
    type:"tree",
    title:"Permission Selection",
    field:"permissions",
    value:[],
    props:{
        data: [
            {
                key: 1,
                title: 'User Management',
                children: [
                    { key: 11, title: 'View Users' },
                    { key: 12, title: 'Edit Users' },
                ]
            },
            {
                key: 2,
                title: 'System Settings',
                children: [
                    { key: 21, title: 'Basic Settings' },
                    { key: 22, title: 'Advanced Settings' },
                ]
            }
        ],
        checkable: true,
        checkStrictly: false,
        checkedStrategy: 'all',
    }
}

Selectable Tree

const rule = {
    type:"tree",
    title:"Menu Selection",
    field:"menu",
    value:[],
    props:{
        data: [
            {
                key: 1,
                title: 'Home',
            },
            {
                key: 2,
                title: 'System Management',
                children: [
                    { key: 21, title: 'User Management' },
                    { key: 22, title: 'Role Management' },
                ]
            }
        ],
        selectable: true,
        multiple: true,
    }
}

Expand All by Default

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

Async Load

const rule = {
    type:"tree",
    title:"Permission Selection",
    field:"permissions",
    value:[],
    props:{
        data: [
            {
                key: 1,
                title: 'User Management',
                isLeaf: false,
            }
        ],
        checkable: true,
    },
    inject: true,
    on: {
        'load-more': ($inject, node) => {
            // Load child node data asynchronously
            return new Promise((resolve) => {
                loadTreeData(node.key).then(res => {
                    node.children = res.data.map(item => ({
                        key: item.id,
                        title: item.name,
                        isLeaf: !item.hasChildren
                    }));
                    resolve();
                });
            });
        },
    },
}

Events Examples

Handle Check and Select Changes

const rule = {
    type:"tree",
    title:"Permission Selection",
    field:"permissions",
    value:[],
    props:{
        data: [
            {
                key: 1,
                title: 'User Management',
                children: [
                    { key: 11, title: 'View Users' },
                ]
            }
        ],
        checkable: true,
    },
    on: {
        check: (checkedKeys, event) => {
            console.log('Checked nodes changed:', checkedKeys, event);
        },
        select: (selectedKeys, event) => {
            console.log('Selected nodes changed:', selectedKeys, event);
        },
        expand: (expandKeys, event) => {
            console.log('Expanded nodes changed:', expandKeys, event);
        },
    },
}

Count Permission Number After Checking

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

Complete configuration items: arco-design_Tree

value: Array

Props

Parameter	Description	Type	Default	Version
size	Size	'mini' | 'small' | 'medium' | 'large'	'medium'
block-node	Whether node occupies one line	boolean	false
default-expand-all	Whether to expand parent nodes by default	boolean	true
multiple	Whether to support multiple selection	boolean	false
checkable	Whether to add checkbox before node	boolean	false
selectable	Whether to support selection	boolean	true
check-strictly	Whether to cancel parent-child node association	boolean	false
checked-strategy	Custom backfill method: all: return all selected nodes, parent: return only parent when both parent and child are selected, child: return only child	'all' | 'parent' | 'child'	'all'
default-selected-keys	Default selected tree nodes	Array<string | number>	-
selected-keys	Selected tree nodes	Array<string | number>	-
default-checked-keys	Default checked tree nodes	Array<string | number>	-
checked-keys	Checked tree nodes	Array<string | number>	-
default-expanded-keys	Default expanded nodes	Array<string | number>	-
expanded-keys	Expanded nodes	Array<string | number>	-
data	Pass data to generate corresponding tree structure	TreeNodeData[]	[]
field-names	Specify field names in node data	FieldNames	-
show-line	Whether to show connection lines	boolean	false
load-more	Callback for async loading data, returns a Promise	(node: TreeNodeData) => Promise<void>	-
draggable	Whether draggable	boolean	false
allow-drop	Whether to allow drop on a node when dragging	(options: { dropNode: TreeNodeData; dropPosition: -1 | 0 | 1;}) => boolean	-
virtual-list-props	Pass virtual list properties, pass this parameter to enable virtual scrolling, VirtualListProps	VirtualListProps	-
default-expand-selected	Whether to expand parent nodes of selected nodes by default	boolean	false	2.9.0
default-expand-checked	Whether to expand parent nodes of checked nodes by default	boolean	false	2.9.0
auto-expand-parent	Whether to automatically expand parent nodes of expanded nodes	boolean	true	2.9.0

Events

Event Name	Description	Parameters
select	Triggered when tree node is clicked	selectedKeys: Array<string | number> event: { selected: boolean; selectedNodes: TreeNodeData[]; node: TreeNodeData; e: Event; }
check	Triggered when tree node checkbox is clicked	checkedKeys: Array<string | number> event: { checked: boolean; checkedNodes: TreeNodeData[]; node: TreeNodeData; e: Event; }
expand	Expand/Collapse	expandKeys: Array<string | number> event: { expanded: boolean; expandNodes: TreeNodeData[]; node: TreeNodeData; e: Event; }
drag-start	Node starts dragging	-
drag-end	Node ends dragging	event: DragEvent node: TreeNodeData
drag-over	Node is dragged to droppable target	event: DragEvent node: TreeNodeData
drag-leave	Node leaves droppable target	event: DragEvent node: TreeNodeData
drop	Node is dropped on droppable target	info: { e: DragEvent; dragNode: TreeNodeData; dropNode: TreeNodeData; dropPosition: -1 ｜ 0 ｜ 1; }