Cascader

Rules

Basic Example

const rule = {
    type:"cascader",
    title:"Location",
    field:"address",
    value:['Shaanxi Province','Xi\'an City','Xincheng District'],
    props:{
        options:[{
            value: 'beijing',
            label: 'Beijing',
            children: [
                {
                    value: 'gugong',
                    label: 'Forbidden City'
                },
                {
                    value: 'tiantan',
                    label: 'Temple of Heaven'
                },
                {
                    value: 'wangfujing',
                    label: 'Wangfujing'
                }
            ]
        }, {
            value: 'jiangsu',
            label: 'Jiangsu',
            children: [
                {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                        {
                            value: 'fuzimiao',
                            label: 'Confucius Temple',
                        }
                    ]
                },
                {
                    value: 'suzhou',
                    label: 'Suzhou',
                    children: [
                        {
                            value: 'zhuozhengyuan',
                            label: 'Humble Administrator\'s Garden',
                        },
                        {
                            value: 'shizilin',
                            label: 'Lion Grove Garden',
                        }
                    ]
                }
            ]
        }]
    }
}

Props Configuration Examples

Searchable Cascader

const rule = {
    type:"cascader",
    title:"Location",
    field:"address",
    value:[],
    props:{
        options: [
            {
                value: 'beijing',
                label: 'Beijing',
                children: [
                    { value: 'chaoyang', label: 'Chaoyang District' },
                    { value: 'haidian', label: 'Haidian District' },
                ]
            },
            {
                value: 'shanghai',
                label: 'Shanghai',
                children: [
                    { value: 'huangpu', label: 'Huangpu District' },
                    { value: 'pudong', label: 'Pudong New Area' },
                ]
            }
        ],
        filterable: true,
        placeholder: "Select location",
        clearable: true,
    }
}

Multiple Selection Cascader

const rule = {
    type:"cascader",
    title:"Product Category",
    field:"categories",
    value:[],
    props:{
        options: [
            {
                value: 'electronics',
                label: 'Electronics',
                children: [
                    { value: 'phone', label: 'Mobile Phones' },
                    { value: 'computer', label: 'Computers' },
                ]
            }
        ],
        multiple: true,
        placeholder: "Select category",
    }
}

Events Examples

Listen to Selection Changes

const rule = {
    type:"cascader",
    title:"Location",
    field:"address",
    value:[],
    props:{
        options: [
            {
                value: 'beijing',
                label: 'Beijing',
                children: [
                    { value: 'chaoyang', label: 'Chaoyang District' },
                ]
            }
        ],
        placeholder: "Select location",
        clearable: true,
    },
    on: {
        change: (value, option) => {
            console.log('Selection value changed:', value, option);
        },
        clear: () => {
            console.log('Selection cleared');
        },
    },
}

Linkage Update Other Fields

const rule = [
    {
        type:"cascader",
        title:"Location",
        field:"address",
        value:[],
        props:{
            options: [
                {
                    value: 'beijing',
                    label: 'Beijing',
                    children: [
                        { value: 'chaoyang', label: 'Chaoyang District' },
                    ]
                }
            ],
            placeholder: "Select location",
        },
        inject: true,
        on: {
            change: ($inject, value, option) => {
                // Auto-fill postal code from selected location
                if (option && option.length > 0) {
                    const postcodeMap = {
                        'chaoyang': '100020',
                        'haidian': '100080',
                    };
                    const lastOption = option[option.length - 1];
                    $inject.api.setValue('postcode', postcodeMap[lastOption.value] || '');
                }
            },
        },
    },
    {
        type:"input",
        field:"postcode",
        title:"Postal Code",
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: TDesign_Cascader

value :Array