Union 联合
联合field可以使用在同一个字段可以同时支持多种field的场景
在线实验室
参数列表
参数 | 说明 | 可选值 | 类型 | 必填 |
---|
type | field类型 | string | 是 |
label | 标签文本 | string | 否 |
ctx | 编辑态为edit,展示态为view,不配置则使用当前block的ctx | "edit" | "view" | 否 |
default | 可以设置默认值 | string | 否 |
labelWidth | 在form和object内生效,可单独指定当前field的标签文本所占的宽度 | string | 否 |
info | 如配置会在标签处展示tooltip提示 | string | 否 |
desc | 如配置会在ctx为edit状态下固定显示在表单项下面 | string | 否 |
hidden | 默认为false,配置为true则改表单项会隐藏 | null | boolean | 否 |
show | 配置后只有满足指定的条件后才显示,实现对目标条件的依赖联动 | string | object | function | 否 |
show.name | 目标字段名 | string | 否 |
show.value | 目标字段值 | string | number | 否 |
rules | 可以配置多条校验规则,会在form的编辑态通过@validate来校验,详见 https://github.com/yiminghe/async-validator | null | array | 否 |
rules[] | object | 否 | |
rules[].require | 是否必填 | boolean | 否 |
rules[].type | 校验类型 | "string" | "number" | "boolean" | "method" | "regexp" | "integer" | "float" | "array" | "object" | "enum" | "date" | "url" | "hex" | "email" | 否 |
props | 会透传至底层的element-ui组件作为props属性,或者是原生dom元素的属性 | null | object | 否 |
fields | union元素的field配置,可以包含任意field | object | 否 |
current | string | 否 |
示例预览
表单展示状态
表单编辑状态
示例代码
select: {
type: 'union',
label: 'union',
current: 'text',
fields: {
date: {
type: 'timerange',
label: 'timerange1'
},
text: {
type: 'text',
label: 'text1',
default: 'sss'
}
}
}