Cascader 多级联动

规则

基础示例

const rule = {
    type:"cascader",
    title:"所在区域",
    field:"address",
    value:['陕西省','西安市','新城区'],
    props:{}
}

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: '浦东新区' },
                ]
            }
        ],
        allowSearch: true,
        placeholder: "请选择区域",
        allowClear: true,
    }
}

多选级联

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

异步加载数据

const rule = {
    type:"cascader",
    title:"所在区域",
    field:"address",
    value:[],
    props:{
        options: [
            {
                value: 'beijing',
                label: '北京',
                isLeaf: false,
            }
        ],
        placeholder: "请选择区域",
    },
    inject: true,
    on: {
        'load-more': ($inject, option, done) => {
            // 根据父级选项加载子级数据
            loadRegionData(option.value).then(res => {
                option.children = res.data.map(item => ({
                    value: item.id,
                    label: item.name,
                    isLeaf: !item.hasChildren
                }));
                done();
            });
        },
    },
}

Events 事件示例

监听选择变化

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

选择后联动更新

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,
        },
    },
]

完整配置项:arco-design_Cascader

value :Array

Props

参数名	描述	类型	默认值	版本
path-mode	绑定值是否为路径	boolean	false
multiple	是否为多选状态（多选模式默认开启搜索）	boolean	false
options	级联选择器的选项	CascaderOption[]	[]
disabled	是否禁用	boolean	false
error	是否为错误状态	boolean	false
size	选择框的大小	'mini' | 'small' | 'medium' | 'large'	'medium'
allow-search	是否允许搜索	boolean	false (single) | true (multiple)
allow-clear	是否允许清除	boolean	false
popup-visible (v-model)	是否显示下拉框	boolean	-
expand-trigger	展开下一级的触发方式	string	'click'
default-popup-visible	是否默认显示下拉框（非受控状态）	boolean	false
placeholder	占位符	string	-
popup-container	弹出框的挂载容器	string | HTMLElement | null | undefined	-
max-tag-count	多选模式下，最多显示的标签数量。0 表示不限制	number	0
format-label	格式化展示内容	(options: CascaderOptionInfo[]) => string	-
trigger-props	下拉菜单的触发器属性	TriggerProps	-
check-strictly	是否开启严格选择模式	boolean	false
load-more	数据懒加载函数，传入时开启懒加载功能	( option: CascaderOptionInfo, done: (children?: CascaderOption[]) => void) => void	-	2.13.0
loading	是否为加载中状态	boolean	false	2.15.0

Events

事件名	描述	参数
change	选中值改变时触发	value: string | string[] | undefined | (string | string[])[]
input-value-change	输入值改变时触发	value: string
clear	点击清除按钮时触发	-
search	用户搜索时触发	value: string
popup-visible-change	下拉框的显示状态改变时触发	visible: boolean
focus	获得焦点时触发	-
blur	失去焦点时触发	-

CascaderOption

参数名	描述	类型	默认值	版本
value	选项值	`string	number`	-
label	选项文本	string	-
render	自定义渲染	RenderFunction	-
disabled	是否禁用	boolean	false
tagProps	展示的标签属性	TagProps	-	2.8.0
children	下一级选项	CascaderOption[]	-
isLeaf	是否是叶子节点	boolean	false