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: '浦东新区' },
                ]
            }
        ],
        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,
        checkStrategy: 'child',
        placeholder: "请选择分类",
    }
}

远程加载数据

const rule = {
    type:"cascader",
    title:"所在区域",
    field:"address",
    value:[],
    props:{
        remote: true,
        placeholder: "请选择区域",
    },
    inject: true,
    on: {
        load: ($inject, option) => {
            // 根据父级选项加载子级数据
            return new Promise((resolve) => {
                loadRegionData(option.value).then(res => {
                    option.children = res.data.map(item => ({
                        value: item.id,
                        label: item.name
                    }));
                    resolve();
                });
            });
        },
    },
}

Events 事件示例

监听选择变化

const rule = {
    type:"cascader",
    title:"所在区域",
    field:"address",
    value:[],
    props:{
        options: [
            {
                value: 'beijing',
                label: '北京',
                children: [
                    { value: 'chaoyang', label: '朝阳区' },
                ]
            }
        ],
        placeholder: "请选择区域",
        clearable: true,
    },
    on: {
        'update:value': (value, option, pathValues) => {
            console.log('选择值改变:', value, option, pathValues);
        },
        blur: () => {
            console.log('失去焦点');
        },
        focus: () => {
            console.log('获得焦点');
        },
    },
}

选择后联动更新

const rule = [
    {
        type:"cascader",
        title:"所在区域",
        field:"address",
        value:[],
        props:{
            options: [
                {
                    value: 'beijing',
                    label: '北京',
                    children: [
                        { value: 'chaoyang', label: '朝阳区' },
                    ]
                }
            ],
            placeholder: "请选择区域",
        },
        inject: true,
        on: {
            'update:value': ($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,
        },
    },
]

完整配置项:naive-ui_Cascader

value :Array

props

名称	类型	默认值	说明	版本
cascade	boolean	true	在多选时是否关联选项
check-strategy	string	'all'	设置勾选策略来指定显示的勾选节点，all 表示显示全部选中节点；parent 表示只显示父节点（当父节点下所有子节点都选中时，对于单选无效）；child 表示只显示子节点；
children-field	string	'children'	替代 CascaderOption 中的 children 字段名
clearable	boolean	false	值是否可清除
disabled	boolean	false	是否禁用
expand-trigger	'click' | 'hover'	'click'	在 remote 被设定时 'hover' 不生效
filterable	boolean	false	remote 被设定时不生效
filter	(pattern: string, option: CascaderOption, path: CascaderOption[]) => boolean	一个基于字符串的过滤算法	过滤选项的函数
value-field	string	'value'	替代 CascaderOption 中的 value 字段名
label-field	string	'label'	替代 CascaderOption 中的 label 字段名
max-tag-count	number | 'responsive'	undefined	多选标签的最大显示数量，responsive 会将所有标签保持在一行
multiple	boolean	false	是否支持多选
options	CascaderOption[]	[]	填充的 options 数据
placeholder	string	'请选择'	提示信息
placement	'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'bottom-start'	弹出位置	2.25.0
remote	boolean	false	是否远程获取数据
render-label	(option: CascaderOption, checked: boolean) => VNodeChild	undefined	Cascader 菜单选项标签渲染函数	2.24.0
separator	string	' / '	数据分隔符
show	boolean	undefined	是否打开菜单
show-path	boolean	true	是否在选择器中显示选项路径
size	'small' | 'medium' | 'large'	'medium'	尺寸
virtual-scroll	boolean	true	是否支持虚拟滚动
on-blur	() => void	undefined	用户 blur 时执行的回调
on-focus	() => void	undefined	用户 focus 时执行的回调
on-load	(option: CascaderOption) => Promise<void>	undefined	在点击未加载完成节点时的回调，在返回的 promise 中设定 option.children，在返回的 promise resolve 或 reject 之后完成加载
on-update:show	(value: boolean) => void	undefined	菜单打开关闭的回调
on-update:value	(value: string | number | Array<string | number> | null, option: CascaderOption | Array<CascaderOption | null> | null, pathValues: Array<CascaderOption | null> | Array<CascaderOption[] | null> | null) => void	undefined	值改变时执行的回调