Skip to content

右侧配置字段映射规则

右侧配置表单中 field 映射规则允许开发者自定义和扩展组件和表单配置项的显示方式。以下是如何使用这些规则来修改和映射组件及表单的配置项。

组件配置项

在组件配置规则(props)方法中,如果 fieldformCreate 开头,系统将自动修改规则中对应的字段。这使得开发者可以通过统一的方式来定义和映射组件的配置。

字段说明
type修改rule.props.type字段,"type"可以任意定义
options>label修改rule.props.options.label字段,"label"可以任意定义
formCreateStyle修改rule.style字段,"style"可以任意定义
formCreateStyle>width修改rule.style.width字段,"width"可以任意定义
formCreateChild修改rule.children[0]

示例:

js
{
    props(){
        return [
            {
                type: 'input',
                field: 'formCreateStyle>width',
                title: '宽度',
                props: {
                    width: '100px'
                }
            }
        ];
    }
}

解释:

该配置将 formCreateStyle>width 字段映射到组件的 rule.style.width 字段。

表单配置项

表单配置中的 field 规则说明如何修改和映射表单的配置项。这些字段支持自定义配置,从而提供灵活的表单布局和功能扩展。

字段说明
size修改options.form.size字段,"size"可以任意定义
_submitBtn>show修改options._submitBtn.show字段,"show"可以任意定义
>globalEvent修改options.globalEvent字段,"globalEvent"可以任意定义
>form>size修改options.form.size字段,"form>size"可以任意定义

示例

js
{
    type: 'select',
    field: 'size',
    title: '表单大小',
    props: {
        options: [
            { label: '小', value: 'small' },
            { label: '中', value: 'medium' },
            { label: '大', value: 'large' }
        ]
    }
}

解释:

该配置将 size 字段映射到表单的 options.form.size 字段,允许选择表单的大小。