TreeSelect

Rules

Basic Example

const rule = {
    type: "treeSelect",
    field: "treeSelect",
    title: "Tree Select",
    value: ["104","105"],
    props: {
        data:[
            {"value": "104", "label": "Organic Vegetables", "disabled": false},
            {"value": "105", "label": "Fresh Fruits", "disabled": false},
        ],
        multiple: true
    },
}

Props Configuration Examples

Single Select Tree

const rule = {
    type: "treeSelect",
    field: "category",
    title: "Product Category",
    value: "104",
    props: {
        data: [
            {
                value: "1",
                label: "Electronics",
                children: [
                    { value: "11", label: "Mobile Phones" },
                    { value: "12", label: "Computers" },
                ]
            },
            {
                value: "2",
                label: "Clothing & Accessories",
                children: [
                    { value: "21", label: "Men's Clothing" },
                    { value: "22", label: "Women's Clothing" },
                ]
            }
        ],
        placeholder: "Select category",
        clearable: true,
    },
}

Multiple Select Tree

const rule = {
    type: "treeSelect",
    field: "categories",
    title: "Product Categories",
    value: ["104","105"],
    props: {
        data: [
            {
                value: "1",
                label: "Electronics",
                children: [
                    { value: "11", label: "Mobile Phones" },
                    { value: "12", label: "Computers" },
                ]
            }
        ],
        multiple: true,
        placeholder: "Select categories",
    },
}

Events Examples

Listen to Changes

const rule = {
    type: "treeSelect",
    field: "category",
    title: "Product Category",
    props: {
        data: [
            {
                value: "1",
                label: "Electronics",
                children: [
                    { value: "11", label: "Mobile Phones" },
                ]
            }
        ],
        placeholder: "Select category",
        clearable: true,
    },
    on: {
        change: (value, context) => {
            console.log('Selection value changed:', value, context);
        },
        clear: () => {
            console.log('Selection cleared');
        },
    },
}

Complete configuration items: TDesign_Tree_Select