antV中给a-form表单赋值和获取表单数据

antV中给a-form表单赋值和获取表单数据

<a-form layout="inline" :form="form">
	<a-form-item label="名称:">
	  <a-input placeholder="请输入名称" v-decorator="['name', { rules: [{ required: true, message: '请输入名称!' }] }]"></a-input>
	</a-form-item>
</a-form>

a-form的使用时，别忘记了在data中定义！

form: this.$form.createForm(this),

表单赋值

方式一：this.form.setFieldsValue();

this.form.setFieldsValue({
    name: this.name,
    age: this.age
})

方式二：(参数很多时，使用特别方便)利用pick对象

注：**Object.assign()** 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

详情见：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

附上Object.assign()简洁的介绍地址:https://www.jianshu.com/p/f9ec860ecd81

lodash中文文档地址：https://www.lodashjs.com/

获取表单数据

可以利用object.assign(),具体实现如下

let formData = Object.assign(this.model, values);

补充：getFieldDecorator、getFieldValue、setFieldValue用法

一、getFieldDecorator

getFieldDecorator是一个方法，这个方法接收两个参数，第一个是表单的字段对象，第二个是验证规则。这个方法本身返回一个方法，需要将需要获取值的标签包裹进去。

<From>
  <FormItem>
      //JS代码书写时需要用 { } 包裹起来，不能直接写在代码块中  
      {
          getFieldDecorator('userName',{
            initialValue:'Jack',
             rules:[]
             })(
                    <Input placeholder='请输入用户名'/>
                )
        }
  </FormItem>
</From>

第一个参数是用户自定义的、用于识别该控件的变量名，这样便于在获取或设置该控件的值。
2019.3.12补充：值得注意的是，getFieldDecorator是一个非常智能的方法，它可以获得自定义组件的value值，在提交表单时会很方便。其次，initialValue的值会覆盖子组件中的placeHolder，如果子组件是下拉框，也会根据initialValue的值来匹配自己的value，并显示相应的值，可以说非常智能了。

二、getFieldValue

三、setFieldValue

转自：https://www.cnblogs.com/tian874540961/p/10237713.html