FormCreate

Appearance

Cascader 多级联动 ​

规则 ​

基础示例 ​

js
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 配置示例 ​

可搜索 ​

js
const rule = {
    type:"cascader",
    title:"所在区域",
    field:"address",
    props:{
        options:[{
            value: 'beijing',
            label: '北京',
            children: [
                { value: 'gugong', label: '故宫' },
                { value: 'tiantan', label: '天坛' },
            ]
        }],
        filterable: true,
        placeholder: "请选择或搜索区域",
    }
}

多选 ​

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

任意级别选择 ​

js
const rule = {
    type:"cascader",
    title:"商品分类",
    field:"category",
    props:{
        options:[{
            value: 'electronics',
            label: '电子产品',
            children: [
                { value: 'phone', label: '手机' },
                { value: 'computer', label: '电脑' },
            ]
        }],
        props: {
            checkStrictly: true,
        },
        placeholder: "可选择任意级别",
    }
}

仅显示最后一级 ​

js
const rule = {
    type:"cascader",
    title:"所在区域",
    field:"address",
    props:{
        options:[{
            value: 'beijing',
            label: '北京',
            children: [
                { value: 'gugong', label: '故宫' },
            ]
        }],
        showAllLevels: false,
        placeholder: "请选择区域",
    }
}

动态加载 ​

js
const rule = {
    type:"cascader",
    title:"商品分类",
    field:"category",
    props:{
        props: {
            lazy: true,
            lazyLoad: (node, resolve) => {
                // 动态加载子节点数据
                const { level } = node;
                if (level === 0) {
                    // 加载第一级数据
                    resolve([
                        { value: '1', label: '电子产品', leaf: false },
                        { value: '2', label: '服装', leaf: false },
                    ]);
                } else if (level === 1) {
                    // 加载第二级数据
                    resolve([
                        { value: '11', label: '手机', leaf: true },
                        { value: '12', label: '电脑', leaf: true },
                    ]);
                }
            },
        },
        placeholder: "请选择分类",
    }
}

Events 事件示例 ​

监听选择变化 ​

js
const rule = {
    type:"cascader",
    title:"所在区域",
    field:"address",
    props:{
        options:[{
            value: 'beijing',
            label: '北京',
            children: [
                { value: 'gugong', label: '故宫' },
            ]
        }],
        placeholder: "请选择区域",
        clearable: true,
    },
    on: {
        change: (value) => {
            console.log('选择值改变:', value);
        },
        'expand-change': (value) => {
            console.log('展开节点改变:', value);
        },
        blur: (event) => {
            console.log('失去焦点:', event);
        },
        focus: (event) => {
            console.log('获得焦点:', event);
        },
        clear: () => {
            console.log('清空选择');
        },
        'visible-change': (visible) => {
            console.log('下拉框显示状态:', visible);
        },
    },
}

选择后联动更新 ​

js
const rule = [
    {
        type:"cascader",
        title:"所在区域",
        field:"address",
        props:{
            options:[{
                value: 'beijing',
                label: '北京',
                children: [
                    { value: 'gugong', label: '故宫' },
                ]
            }],
            placeholder: "请选择区域",
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // 根据选择的区域，自动填充邮政编码
                const zipCodeMap = {
                    'beijing': '100000',
                    'gugong': '100006',
                };
                const lastValue = value[value.length - 1];
                if (zipCodeMap[lastValue]) {
                    $inject.api.setValue('zipCode', zipCodeMap[lastValue]);
                }
            },
        },
    },
    {
        type:"input",
        title:"邮政编码",
        field:"zipCode",
        props: {
            disabled: true,
        },
    },
]

完整配置项:Element_Cascader

value :Array

Props ​

属性名说明类型默认值
options选项的数据源， value 和 label 可以通过 CascaderProps 自定义.object—
props配置选项, 请参阅下面 CascaderProps 表。object—
size尺寸enum—
placeholder输入框占位文本string—
disabled是否禁用boolean—
clearable是否支持清空选项boolean—
showAllLevels输入框中是否显示选中值的完整路径booleantrue
collapseTags多选模式下是否折叠Tagboolean—
collapseTagsTooltip当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 truebooleanfalse
maxCollapseTagsTooltipHeightcollapse tags 的最大高度string / number—
separator用于分隔选项的字符string' / '
filterable该选项是否可以被搜索boolean—
filterMethod自定义搜索逻辑，第一个参数是node，第二个参数是keyword，返回的布尔值表示是否保留该选项Function—
debounce搜索关键词正在输入时的去抖延迟，单位为毫秒number300
beforeFilter过滤函数调用前，所要调用的钩子函数，该函数接收要过滤的值作为参数。 如果该函数的返回值是 false 或者是一个被拒绝的 Promise，那么接下来的过滤逻辑便不会执行。Function—
popperClass弹出内容的自定义类名string''
teleported弹层是否使用 teleportbooleantrue
tagType标签类型enuminfo
tagEffecttag effectenumlight
validateEvent输入时是否触发表单的校验booleantrue
maxCollapseTags需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。number1
emptyValues组件的空值配置 参考config-providerarray—
valueOnClear清空选项的值 参考 config-providerstring / number / boolean / Function—
persistent当下拉框未被激活并且persistent设置为false，下拉框容器会被删除。booleantrue
fallbackPlacementsTooltip 可用的 positions 请查看popper.js 文档arrary—
placement下拉框出现的位置enumbottom-start

Events ​

事件名说明类型
change当绑定值变化时触发的事件Function
expand-change当展开节点发生变化时触发Function
blur当失去焦点时触发Function
focus当获得焦点时触发Function
clear可清空的单选模式下用户点击清空按钮时触发Function
visible-change下拉框出现/隐藏时触发Function
remove-tag在多选模式下，移除Tag时触发Function

Slots ​

插槽名说明作用域
default自定义备选项的节点内容，分别为当前节点的 Node 对象和数据object
empty无匹配选项时的内容—
prefix输入框头部内容—
suggestion-item搜索时自定义建议项内容object

CascaderProps ​

属性说明类型默认值
expandTrigger次级菜单的展开方式enumclick
multiple是否多选booleanfalse
checkStrictly是否严格的遵守父子节点不互相关联booleanfalse
emitPath在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值booleantrue
lazy是否动态加载子节点，需与 lazyLoad 方法结合使用booleanfalse
lazyLoad加载动态数据的方法，仅在 lazy 为 true 时有效Function—
value指定选项的值为选项对象的某个属性值stringvalue
label指定选项标签为选项对象的某个属性值stringlabel
children指定选项的子选项为选项对象的某个属性值stringchildren
disabled指定选项的禁用为选项对象的某个属性值stringdisabled
leaf指定选项的叶子节点的标志位为选项对象的某个属性值stringleaf
hoverThresholdhover 时展开菜单的灵敏度阈值number500

FormCreate 是一个开源项目，基于 MIT 许可证发布，欢迎个人和企业用户免费使用

MIT Licensed | Copyright © 2018-present FormCreate
陕ICP备2024036423号-1