Object 对象

在线实验室

Object 对象 - 图1

Object 对象 - 图2

参数列表

参数说明可选值 | 类型必填
typefield类型string是
label标签文本string否
ctx编辑态为edit，展示态为view，不配置则使用当前block的ctx"edit" | "view"否
default可以设置默认值object否
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-validatornull | 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对象元素的field配置，可以包含任意fieldobject否
layout可以重定义field的布局，如合并多个field在同一行，如{ a: ['a', 'b']}null | object否

示例预览

表单展示状态

表单编辑状态

示例代码

  1. simpleObject: {
  2.     type: 'object',
  3.     label: 'simpleObject',
  4.     fields: {
  5.         text: {
  6.             type: 'text',
  7.             label: 'rule2',
  8.             rules: [
  9.                 {
  10.                     required: true,
  11.                     message: '请输入活动名称',
  12.                     trigger: 'blur'
  13.                 }, 
  14.                 { 
  15.                     min: 3, 
  16.                     max: 5, 
  17.                     message: '长度在 3 到 5 个字符', 
  18.                     trigger: 'blur' 
  19.                 }
  20.             ]
  21.         },
  22.         date: {
  23.             type: 'date',
  24.             label: 'date'
  25.         }
  26.     }
  27. },
  28. mutiObject: {
  29.     type: 'object',
  30.     label: 'mutiObject',
  31.     fields: {
  32.         date: {
  33.             type: 'date',
  34.             label: 'date'
  35.         },
  36.         checkbox: {
  37.             type: 'checkbox',
  38.             label: 'checkbox',
  39.             props: {
  40.                 options: {
  41.                     '1': '黄金屋'
  42.                 }
  43.             }
  44.         },
  45.         ArrayArray: {
  46.             type: 'array',
  47.             label: 'ArrayArray',
  48.             field: {
  49.                 type: 'array',
  50.                 label: 'array',
  51.                 field: {
  52.                     type: 'text',
  53.                     label: 'text'
  54.                 }
  55.             }
  56.         },
  57.         ArrayObject: {
  58.             type: 'array',
  59.             label: 'ArrayObject',
  60.             field: {
  61.                 type: 'object',
  62.                 label: 'object',
  63.                 fields: {
  64.                     text: {
  65.                         type: 'text',
  66.                         label: 'text',
  67.                         rules: [
  68.                             {
  69.                                 required: true,
  70.                                 message: '请输入活动名称',
  71.                                 trigger: 'blur'
  72.                             }, 
  73.                             { 
  74.                                 min: 3, 
  75.                                 max: 5, 
  76.                                 message: '长度在 3 到 5 个字符', 
  77.                                 trigger: 'blur' 
  78.                             }
  79.                         ]
  80.                     },
  81.                     date: {
  82.                         type: 'date',
  83.                         label: 'date'
  84.                     }
  85.                 }
  86.             }
  87.         }
  88.     }
  89. }