vue antd Form表單的使用及說(shuō)明
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ù)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue 菜單欄點(diǎn)擊切換單個(gè)class(高亮)的方法
今天小編就為大家分享一篇Vue 菜單欄點(diǎn)擊切換單個(gè)class(高亮)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08![elementui[el-table]toggleRowSelection默認(rèn)多選事件無(wú)法選中問(wèn)題](http://img.jbzj.com/images/xgimg/bcimg1.png)
elementui[el-table]toggleRowSelection默認(rèn)多選事件無(wú)法選中問(wèn)題
這篇文章主要介紹了elementui[el-table]toggleRowSelection默認(rèn)多選事件無(wú)法選中問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了詳解vue 兼容IE報(bào)錯(cuò)解決方案，詳細(xì)的介紹了幾種原因及其解決方案，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-12-12
vue-cli 3 全局過(guò)濾器的實(shí)例代碼詳解
這篇文章主要介紹了vue-cli 3 全局過(guò)濾器的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
Vue2.0 vue-source jsonp 跨域請(qǐng)求
這篇文章主要介紹了Vue2.0 vue-source jsonp 跨域請(qǐng)求，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
這篇文章主要介紹了解決vuecli3中img src 的引入問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
解決在vue項(xiàng)目中webpack打包后字體不生效的問(wèn)題
今天小編就為大家分享一篇解決在vue項(xiàng)目中webpack打包后字體不生效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
jeecgboot-vue3查詢區(qū)label文字居左實(shí)現(xiàn)過(guò)程解析
這篇文章主要為大家介紹了jeecgboot-vue3查詢區(qū)label文字居左實(shí)現(xiàn)過(guò)程解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-08-08
這篇文章主要給大家介紹了關(guān)于vue3組件TS類型聲明的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
require是node中的一個(gè)方法,他的作用是用于引入模塊、 JSON、或本地靜態(tài)文件,這篇文章主要介紹了vue中的require使用,需要的朋友可以參考下2023-08-08