介绍

v-form-create是一个可以根据JSON数据自动生成表单的组件，您可以通过 v-form-design 生成指定的 JSON 格式数据，用于传递给该组件，该组件会根据数据自动生成表单。

使用方式

提交 重置 修改数据 修改城市列表 异步修改城市列表

<template>
  <div>
    <v-form-create :formConfig="formConfig" :formData="formData" v-model="fApi" />
    <a-button @click="submit" type="primary">提交</a-button>
    <a-button @click="resetForm">重置</a-button>
    <a-button @click="setData">修改数据</a-button>
    <a-button @click="setOptions">修改城市列表</a-button>
    <a-button @click="setAsyncOptions">异步修改城市列表</a-button>
  </div>
</template>
<script>
export default {
  name: 'Demo',
  data() {
    return {
      fApi: {},
      formData: {},
      formConfig: {
        formItems: [
          {
            type: 'input',
            label: '姓名',
            field: 'name',
            span: 24,
            props: {
              type: 'text'
            }
          },
          {
            type: 'number',
            label: '年龄',
            field: 'age',
            span: 24,
            props: {}
          },
          {
            type: 'select',
            label: '城市',
            field: 'city',
            span: 24,
            props: {
              defaultValue: 'beijing',
              options: [
                {
                  label: '北京',
                  value: 'beijing'
                },
                {
                  label: '上海',
                  value: 'shanghai'
                },
                {
                  label: '广州',
                  value: 'guangzhou'
                }
              ]
            }
          }
        ],
        config: {
          layout: 'horizontal',
          labelLayout: 'flex',
          labelWidth: 100,
          labelCol: {},
          wrapperCol: {}
        }
      }
    }
  },
  methods: {
    async submit() {
      const data = await this.fApi.submit()
      alert(JSON.stringify(data, null, '\t'))
    },
    resetForm() {
      this.fApi.resetFields()
    },
    setData() {
      this.fApi.setValue('name', '张三')
      // this.fApi.setValue({ name: '张三', age: 20 })
    },
    setOptions() {
      this.fApi.setProps('city', 'options', [
        { label: '杭州', value: 'hangzhou' },
        { label: '深圳', value: 'shenzhen' }
      ])
    },
    setAsyncOptions() {
      this.fApi.setProps('city', 'options', () => {
        return new Promise(resolve => {
          setTimeout(() => {
            resolve([
              { label: '天津', value: 'tianjin' },
              { label: '武汉', value: 'wuhan' }
            ])
          }, 2000)
        })
      })
    }
  }
}
</script>

显示代码 复制代码 复制代码

API

参数	说明	类型	默认值
formConfig	表单配置对象，包含formItems表单项列表，config表单配置	Object
v-model	绑定表单方法对象，获取到的方法可用于提交，重置，校验等	Object
formData	表单数据模型，用于获取表单绑定的数据值	Object

方法

注：我们建议使用v-model双向绑定获取的fApi进行方法调用，而不是使用ref获取组件实例

方法名	说明	参数
validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise	Function(callback: Function(boolean, object))
validateField	对部分表单字段进行校验的方法	Function(props: array | string, callback: Function(errorMessage: string))
resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果	-
clearValidate	移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果	Function(props: array \
submit	表单提交方法，调用此方法后，触发数据校验，如果校验成功，返回 Promise 获取表单数据	-
set	设置指定表单对应的表单项配置，参数为field需要设置的表单绑定的field，key为需要设置的key，value为需要设置的值	Function(field,key,value)
get	获取指定field绑定的表单项配置，获取数据为只读，如果需要修改，建议使用set方法	Function(field)
setValue	设置formData中指定field的值，触发校验，您也可以传递一个对象，来设置多个值例如{ name: 'xiaoming', age: 18}	Function(field:string | Object,value?)
getValue	获取formData中指定field的值	Function(field)
hidden	隐藏指定field对应的表单项	Function(field)
show	显示指定field对应的表单项	Function(field)
setProps	设置指定field对应表单项的props，需要设置表单项props属性时，使用此方法	Function(field,key,value)
getData	获取formData对象，当然您也可以直接使用formData来读取数据	-
disable	禁用表单，您可以传递指定的 field 来对表单项禁用，传空时禁用整个表单，传 false 时启用整个表单(单独操作了 disabled 的表单项不支持启用)，	-

事件

事件名称	说明	类型
onSubmit	监听 v-form-create 内部按钮提交表单事件	Function(formData)