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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM