GenerateForm 表单生成器

使用表单设计器生成的JSON数据,快速生成表单页面、验证并获取表单数据。

生成表单

<fm-generate-form 
  :data="jsonData" 
  ref="generateForm"
>
</fm-generate-form>
export default {
  data () {
    return {
      jsonData: {
        "list": [/* ... */],
        "config": {
          "labelWidth": 100,
          "labelPosition": "right",
          "size": "small",
          "customClass": ""
        }
      }
    }
  }
}

jsonData 数据通过表单设计器中获取JSON可以得到。

远端数据方法

表单需要预先加载数据时(比如下拉框选项数据),可以使用 :remote 传递获取数据方法,方法名称需要在表单设计器中配置。

<fm-generate-form 
  :data="jsonData"
  :remote="remoteFuncs"
  ref="generateForm"
>
</fm-generate-form>
export default {
  data () {
    return {
      remoteFuncs: {
        // 字段配置时配置的远端方法,保持和配置时输入的名称一致
        func_test (resolve) {
          const options = [
            {value: '1', label: '1111'},
            {value: '2', label: '2222'},
            {value: '3', label: '3333'}
          ]

          resolve(options)
        },
      }
    }
  }
}

更详细的使用方法请参考使用手册 远端数据配置

验证并获取表单数据

调用 getData 方法首先会校验数据,成功后会返回填写的表单数据。

<fm-generate-form
  :data="jsonData"
  ref="generateForm">
</fm-generate-form>
this.$refs.generateForm.getData().then(data => {
  // 数据获取成功
}).catch(e => {
  // 数据校验失败
})

Attributes

参数 说明 类型 默认值
data 表单配置json数据 Object -
value 表单数据 Object -
remote 表单设计器中配置的远端方法 Object -
edit 表单可编辑状态 Boolean true

Events

事件名称 说明 回调参数
on-change 表单数据变化时的回调 field - 数据改变标识
value - 数据改变后的值
data - 表单数据

方法

通过 ref 可以获取到 GenerateForm 实例并调用实例方法

方法名 说明 参数
getData 获取表单数据 -
reset 重置表单数据 -
display 显示表单隐藏的表单字段 fields : 字段标识数组,例 ['name'] 高级版本提供
hide 隐藏表单字段 fields : 字段标识数组,例 ['name'] 高级版本提供
disabled 动态设置表单禁用字段 fields : 设置字段标识数组
disabled : 是否禁用
高级版本提供