Fork me on Gitee

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

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

image-20220110091443455

<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),

表单赋值

image-20220110092257870

image-20220110092609038

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

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

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

image-20220110092725150

注:**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/

获取表单数据

image-20220110094557745

image-20220110094617073

image-20220110094830766

可以利用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

image-20220110095831942

三、setFieldValue

image-20220110095901540

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

posted @ 2022-01-10 10:01  等风的羽毛  阅读(3557)  评论(0编辑  收藏  举报
1