Tree

Rules

Basic Example

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

Props Configuration Examples

Checkable Tree

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

Selectable Tree

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

Expand All by Default

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

Async Loading

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

Events Examples

Handle Check and Selection Changes

const rule = {
    type:"tree",
    title:"Permission Selection",
    field:"permissions",
    value:[],
    props:{
        data: [
            {
                key: 1,
                label: 'User Management',
                children: [
                    { key: 11, label: 'View Users' },
                ]
            }
        ],
        checkable: true,
        cascade: true,
    },
    on: {
        'update:checked-keys': (keys, options) => {
            console.log('Checked nodes changed:', keys, options);
        },
        'update:selected-keys': (keys, options) => {
            console.log('Selected nodes changed:', keys, options);
        },
        'update:expanded-keys': (keys, options) => {
            console.log('Expanded nodes changed:', keys, options);
        },
    },
}

Count Permissions After Checking

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

Complete configuration items: naive-ui_Tree

value :Array

Props

Name	Type	Default Value	Description	Version
allow-drop	(info: { dropPosition: DropPosition, node: TreeOption, phase: 'drag' | 'drop' }) => boolean	A function that does not allow drop inside leaf nodes	Whether drop is allowed
block-line	boolean	false	Node entire line stretched
block-node	boolean	false	Node name entire line stretched
cancelable	boolean	true	Whether cancellation is allowed after selection
cascade	boolean	false	Whether to associate options
check-strategy	string	'all'	Set check strategy to specify values returned by check callback, all means callback function value is all selected nodes; parent means callback function value is parent nodes (when all child nodes under parent node are selected); child means callback function value is child nodes
checkable	boolean	false	Whether to show checkbox, need to set cascade to true
children-field	string	'children'	Alternative field name for children in TreeOption
checked-keys	Array<string | number>	undefined	If set, checked state is controlled
data	Array<TreeOption>	[]	Tree node data. Resetting data will clear some uncontrolled states. If you need to modify data during use, it's better to control the tree in a controlled way
default-checked-keys	Array<string | number>	[]	Default selected multiple options
default-expand-all	boolean	false	Expand all options
default-expanded-keys	Array<string | number>	[]	Default expanded items
default-selected-keys	Array<string | number>	[]	Default selected nodes
draggable	boolean	false	Whether draggable
expand-on-dragenter	boolean	true	Whether to expand node after dragging in
expanded-keys	Array<string | number>	undefined	If set, expansion is controlled
filter	(pattern: string, node: TreeOption) => boolean	A simple string filtering algorithm	Function to filter nodes based on pattern
indeterminate-keys	Array<string | number>	undefined	Keys of partially selected options
key-field	string	'key'	Alternative field name for key in TreeOption
label-field	string	'label'	Alternative field name for label in TreeOption
leaf-only	boolean	false	Whether to enable only leaf tree nodes selectable
node-props	(info: { option: TreeOption }) => HTMLAttributes	undefined	HTML attributes of nodes	2.25.0
multiple	boolean	false	Whether to allow multiple node selection
on-load	(node: TreeOption) => Promise<void>	undefined	Callback function for async data loading
pattern	string	''	Default search content
remote	boolean	false	Whether to fetch options asynchronously, used with onLoad
render-label	(info: {option: TreeOption, checked: boolean, selected: boolean}) => VNodeChild	undefined	Rendering function for node content
render-prefix	(info: {option: TreeOption, checked: boolean, selected: boolean}) => VNodeChild	undefined	Rendering function for node prefix
render-suffix	(info: {option: TreeOption, checked: boolean, selected: boolean}) => VNodeChild	undefined	Rendering function for node suffix
render-switcher-icon	() => VNodeChild	undefined	Rendering function for node expand switch	2.24.0
selectable	boolean	true	Whether nodes can be selected
selected-keys	Array<string | number>	undefined	If set, selected state is controlled
virtual-scroll	boolean	false	Whether to enable virtual scrolling, you need to set tree height style before enabling
watch-props	Array<'defaultCheckedKeys' | 'defaultSelectedKeys' |'defaultExpandedKeys'>	undefined	Default properties that need to detect changes, component state will update after detection. Note: watch-props itself is not reactive
on-dragend	(data: { node: TreeOption, event: DragEvent }) => void	undefined	Callback function after node drag action completes
on-dragenter	(data: { node: TreeOption, event: DragEvent }) => void	undefined	Callback function during node dragging
on-dragleave	(data: { node: TreeOption, event: DragEvent }) => void	Callback function after dragging a node, when the node leaves other nodes
on-dragstart	(data: { node: TreeOption, event: DragEvent }) => void	undefined	Callback function when starting to drag a node
on-drop	(data: { node: TreeOption, dragNode: TreeOption, dropPosition: 'before' | 'inside' | 'after', event: DragEvent }) => void	undefined	Callback function after node drag action completes
on-update:checked-keys	(keys: Array<string | number>, option: Array<TreeOption | null>)) => void	undefined	Callback function when node checked items change
on-update:indeterminate-keys	(keys: Array<string | number>, option: Array<TreeOption | null>)) => void	undefined	Callback function when node partially checked items change
on-update:expanded-keys	(keys: Array<string | number>, option: Array<TreeOption | null>)) => void	undefined	Callback function when node expanded items change
on-update:selected-keys	(keys: Array<string | number>, option: Array<TreeOption | null>)) => void	undefined	Callback function when node selected items change

TreeOption Properties

Name	Type	Description
key	string | number	Node's key, needs to be unique, can use key-field to modify field name
label	string	Node's content, can use label-field to modify field name
checkboxDisabled?	boolean	Whether to disable node's checkbox
children?	TreeOption[]	Node's child nodes
disabled?	boolean	Whether to disable node
isLeaf?	boolean	Whether node is a leaf node, required in remote mode
prefix?	string | (() => VNodeChild)	Node's prefix
suffix?	string | (() => VNodeChild)	Node's suffix