# 动态表单渲染

首先, json 配置 定义

const config = {
  attrs: {
    // 表单属性
    'inline': false,
    'labelPosition': 'right',
    'labelWidth': '120px',
    'size': 'small',
    'statusIcon': true
  },
  // 布局 组件
  layout: [
    {
      attrs: {
        // 布局组件属性
        gutter: 0
      },
      formItem: [
        {
          // item 配置项
          attrs: {

          },
          col: {
            span: 8
          },
          // 表单组件属性
          itemAttrs: {
            'type': 'radio',
            'label': '性别',
            'value': '',
            'button': false,
            'border': true,
            'rules': [],
            'key': 'gender',
            'options': [
              {
                'value': '1',
                'label': '男',
                'disabled': false
              },
              {
                'value': '0',
                'label': '女',
                'disabled': false
              }
            ]
          }
        },
        {
          // item 配置项
          attrs: {
          },
          col: {
            span: 8
          },
          // 表单组件属性
          itemAttrs: {
            'type': 'input',
            'label': '姓名',
            'disable': false,
            'readonly': false,
            'value': '',
            'placeholder': '请输入姓名',
            'rules': [],
            'key': 'name',
            'subtype': 'text'
          }
        }
      ]
    }
  ]
}

最终, 表单验证通过得到数据 结果为

{
    "name": "Genji",
    "gender": "1"
}
Last Updated: 12/3/2019, 4:12:28 AM