vue?antd?Form表單如何使用

這篇文章主要講解了“vue antd Form表單如何使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“vue antd Form表單如何使用”吧！

vue antd Form表單的使用

1、安裝

$ npm i --save ant-design-vue

2、引入 在 main.js 文件中引入

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css'
 
Vue.use(Antd);

3、在組件庫(kù)中找到form組件，將組件代碼復(fù)制到自己的文件上 

https://www.antdv.com/components/form-cn/    <-- 組件地址

4、使用form表單時(shí) v-decorator 相當(dāng)于 v-model,所以使用  v-decorator 時(shí)不能使用v-model

<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
    <a-form-item label="Note">
      <a-input
        v-decorator="['note', //value名字 例如:v-model="note"
                         { rules: [
                            { required: true,// 是否必填 true必填 false不必填
                              message: 'Please input your note!' //觸發(fā)限制時(shí)的提示
                             }
                           ] 
                          }
                     ]"
      />
    </a-form-item>
  </a-form>
 
<!-- ----------------------------------------- -->
<script>
export default {
  data() {
    return {
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),
    };
  },
  methods: {
   }
};
</script>

5、獲取表單的內(nèi)容，并做限制

methods: {
    handleSubmit(e) {
      e.preventDefault(); //阻止默認(rèn)操作
      this.form.validateFields((err, values) => { //獲取表單的值
        if (!err) {
         console.log(values) //values是表單里面所有值的集合，使用方法 例如 values.note
        }
      });
    },
  },

6、獲取表單內(nèi)容，不做限制，單純獲取

methods: {
    handleSubmit(e) {
      e.preventDefault(); //阻止默認(rèn)操作
      const values=this.form.getFieldsValue() //values是表單里面所有值的集合，使用方法 例如 values.note
    },
  },

7、清空表單

this.form.resetFields();//在點(diǎn)擊 清空或重置按鈕時(shí)調(diào)用的函數(shù)中使用

8、修改表單內(nèi)容

this.form.setFieldsValue({
    note:"大可愛(ài)"
})

9、默認(rèn)內(nèi)容 表單中默認(rèn)的value值用 initialValue 設(shè)置

<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
    <a-form-item label="Note">
      <a-input
        v-decorator="['note', //value名字 例如:v-model="note"
                         { rules: [
                            { required: true,// 是否必填 true必填 false不必填
                              message: 'Please input your note!' //觸發(fā)限制時(shí)的提示
                             }
                           ] ，
                           initialValue:"3333" //默認(rèn)value值
                          }
                     ]"
      />
    </a-form-item>
  </a-form>

antd vue表單使用注意點(diǎn)

1、表單基本元素及獲取表單值

<a-form layout="inline" :form="form">
	<a-form-item label="姓名" >
		<a-input v-decorator="['name']" placeholder="請(qǐng)輸入姓名"></a-input>
	</a-form-item>
	<a-button type="primary" html-type="submit" @click="submit">查詢</a-button>
	</a-form-item>
</a-form>

<script>
	export default {
		data() {
          return {
            form: this.$form.createForm(this, { name: 'form name' }),
          },
		methods:{
            submit(){
            	console.log(this.form.getFieldsValue())
            }
        }
	}
</script>

1、使用this.$form.createForm(this, options)包裝組件，便于之后查找組件

2、通過(guò)v-decorator或者getFieldDecorator和表單進(jìn)行雙向綁定

3、使用 getFieldsValue

getFieldValue setFieldsValue 等獲取或設(shè)置表單值

2、表單元素添加默認(rèn)值

<a-input v-decorator="['name',{initialValue: info.name}]" ></a-input>

通過(guò)v-decorator中的initialValue進(jìn)行設(shè)置

3、Select選擇器

在使用Select, 選項(xiàng)比較多, 通過(guò)輸入來(lái)篩選選項(xiàng)需要設(shè)置showSearch為true，Select組件默認(rèn)是按照篩選項(xiàng)的value來(lái)篩選的.，如果需要按照篩選項(xiàng)的顯示的內(nèi)容來(lái)篩選, 應(yīng)該把optionFilterProp的值修改為children

4、向表單中額外注冊(cè)不顯示的表單項(xiàng)

錯(cuò)誤方式：

 this.form.setFieldsValue({extF: 'test'})

報(bào)錯(cuò)如下：

[Antd] Warning: You cannot set a form field before rendering a field associated with the value.

正確方式：

this.form.getFieldDecorator('extF', {initialValue: 'test', preserve: true})

5、穿梭框獲取target對(duì)應(yīng)的title

let targetList= []
this.targetKeys.forEach(item => {
	let arr = this.list.filter(value => value.key == item)
		targetList= [...targetList, ...arr]
})
let titles = []
newArr.forEach(item => {
	titles.push(item.title)
})

6、Select選擇器獲取對(duì)應(yīng)的label值

設(shè)置labelInValue值

這樣的話，F(xiàn)ormItem中設(shè)置initialValue時(shí)應(yīng)如下設(shè)置：

initialValue:{key:formVals.itemId,label:formVals.itemName},

如果要清掉這種情況下的value值，請(qǐng)?jiān)O(shè)置為undefined

this.form.setFieldsValue({dep: undefined})

7、Select選擇器傳遞自定義參數(shù)

<a-select @change="value => handleChange(value, param)" >
 </a-select>

handleChange的value參數(shù)即為默認(rèn)參數(shù)，param為自定義參數(shù)

感謝各位的閱讀，以上就是“vue antd Form表單如何使用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)vue antd Form表單如何使用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！