Cascader 多级联动

规则

基础示例

const rule = {
    type:"cascader",
    title:"所在区域",
    field:"address",
    value:['陕西省','西安市','新城区'],
    props:{
        options:[{
            value: 'beijing',
            label: '北京',
            children: [
                {
                    value: 'gugong',
                    label: '故宫'
                },
                {
                    value: 'tiantan',
                    label: '天坛'
                },
                {
                    value: 'wangfujing',
                    label: '王府井'
                }
            ]
        }, {
            value: 'jiangsu',
            label: '江苏',
            children: [
                {
                    value: 'nanjing',
                    label: '南京',
                    children: [
                        {
                            value: 'fuzimiao',
                            label: '夫子庙',
                        }
                    ]
                },
                {
                    value: 'suzhou',
                    label: '苏州',
                    children: [
                        {
                            value: 'zhuozhengyuan',
                            label: '拙政园',
                        },
                        {
                            value: 'shizilin',
                            label: '狮子林',
                        }
                    ]
                }
            ]
        }]
    }
}

Props 配置示例

可搜索级联选择

const rule = {
    type:"cascader",
    title:"所在区域",
    field:"address",
    value:[],
    props:{
        options: [
            {
                value: 'beijing',
                label: '北京',
                children: [
                    { value: 'chaoyang', label: '朝阳区' },
                    { value: 'haidian', label: '海淀区' },
                ]
            },
            {
                value: 'shanghai',
                label: '上海',
                children: [
                    { value: 'huangpu', label: '黄浦区' },
                    { value: 'pudong', label: '浦东新区' },
                ]
            }
        ],
        filterable: true,
        placeholder: "请选择区域",
        clearable: true,
    }
}

多选级联

const rule = {
    type:"cascader",
    title:"商品分类",
    field:"categories",
    value:[],
    props:{
        options: [
            {
                value: 'electronics',
                label: '电子产品',
                children: [
                    { value: 'phone', label: '手机' },
                    { value: 'computer', label: '电脑' },
                ]
            }
        ],
        multiple: true,
        placeholder: "请选择分类",
    }
}

Events 事件示例

监听选择变化

const rule = {
    type:"cascader",
    title:"所在区域",
    field:"address",
    value:[],
    props:{
        options: [
            {
                value: 'beijing',
                label: '北京',
                children: [
                    { value: 'chaoyang', label: '朝阳区' },
                ]
            }
        ],
        placeholder: "请选择区域",
        clearable: true,
    },
    on: {
        change: (value, option) => {
            console.log('选择值改变:', value, option);
        },
        clear: () => {
            console.log('清空选择');
        },
    },
}

选择后联动更新

const rule = [
    {
        type:"cascader",
        title:"所在区域",
        field:"address",
        value:[],
        props:{
            options: [
                {
                    value: 'beijing',
                    label: '北京',
                    children: [
                        { value: 'chaoyang', label: '朝阳区' },
                    ]
                }
            ],
            placeholder: "请选择区域",
        },
        inject: true,
        on: {
            change: ($inject, value, option) => {
                // 根据选择的区域自动填充邮政编码
                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:"邮政编码",
        props: {
            disabled: true,
        },
    },
]

完整配置项:TDesign_Cascader

value :Array