Tree

Rules

Basic Example

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

Props Configuration Examples

Checkable Tree

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

Selectable Tree

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

Expand All by Default

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

Events Examples

Listen to Changes

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

Count Permissions After Checking

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

Complete configuration items: TDesign_Tree

value :Array