右侧配置字段映射规则
右侧配置表单中 field
映射规则允许开发者自定义和扩展组件和表单配置项的显示方式。以下是如何使用这些规则来修改和映射组件及表单的配置项。
组件配置项
在组件配置规则(props)方法中,如果 field
以 formCreate
开头,系统将自动修改规则中对应的字段。这使得开发者可以通过统一的方式来定义和映射组件的配置。
字段 | 说明 |
---|---|
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 字段,允许选择表单的大小。