這篇文章主要介紹了如何使用Vue生成一個(gè)動(dòng)態(tài)表單的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡(jiǎn)單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇如何使用Vue生成一個(gè)動(dòng)態(tài)表單文章都會(huì)有所收獲,下面我們一起來看看吧。
專注于為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)武寧免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動(dòng)了上千家企業(yè)的穩(wěn)健成長(zhǎng),幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。1. 上傳圖片組件
上傳圖片組件這里使用了上傳者組件。
模板
divclass='defaultimages '
div class='標(biāo)簽“{ item。title } }/div
div v-if='項(xiàng)。val==' null ' class=' content '
上傳者
:max-num='8 '
:user-imgs='project_image '
@change='onUploadProject '
/
/div
div-elseclass=' img-wrap ' g
t;
2. 多行輸入框組件
默認(rèn)多行輸入框?yàn)?行
{{item.title}}
3. 下拉選擇框組件
使用了element-ui的el-select
{{item.title}}
其它兩個(gè)數(shù)字單行輸入框組件、文本單輸入框組件跟多行輸入框組件類似。
組件都創(chuàng)建好了,為了方便統(tǒng)一管理這些自定義組件。將組件們引入再導(dǎo)出,通過export default復(fù)合的形式。
//單行文本輸入框組件 export{defaultasString}from'./string.vue' //單行數(shù)字輸入框組件 export{defaultasInteger}from'./integer.vue' //多行文本輸入框組件 export{defaultasMultiple}from'./multiple.vue' //下拉列表選擇器組件 export{defaultasSelect_item}from'./select_item.vue' //上傳圖片組件 export{defaultasImages}from'./images.vue'
再動(dòng)態(tài)表單頁面統(tǒng)一引入,以Vue動(dòng)態(tài)組件的形式進(jìn)行渲染,is 屬性為動(dòng)態(tài)組件名。
上面完成后,動(dòng)態(tài)表單展現(xiàn)出來了。表單是動(dòng)態(tài)生成的,如何進(jìn)行表單驗(yàn)證,和表單數(shù)據(jù)的匯總呢?
表單數(shù)據(jù)匯總
再動(dòng)態(tài)渲染組件的,傳入了number 參數(shù),這個(gè)參數(shù)用來標(biāo)識(shí)當(dāng)前組件位于動(dòng)態(tài)表單的第幾個(gè),方便后期填入數(shù)據(jù)后,進(jìn)行數(shù)據(jù)保存。
默認(rèn)value屬性值為空,對(duì)value進(jìn)行監(jiān)聽,當(dāng)value變動(dòng)的時(shí) 候進(jìn)行emit,告訴父組件數(shù)據(jù)變更了,請(qǐng)保存。
data(){ return{ value:'' } }, watch:{ value(v,o){ this.throttleHandle(()=>{ this.$emit('changeComponent',{ number:this.number, value:this.$data.value }) }) } },
但是數(shù)據(jù)保存到哪里?怎么保存呢? 讓后端給一個(gè)表單全部字段的接口,取到數(shù)據(jù)存到data中,每次數(shù)據(jù)更新就去查找是否存在這個(gè)字段,有的話就賦值保存起來。后面提交的時(shí)候,就提交這個(gè)對(duì)象。
表單校驗(yàn)
提交的時(shí)候,希望用戶能夠把表單填完再調(diào)用提交接口,需要前端校驗(yàn)是否填完沒有的話,就給響應(yīng)的toast請(qǐng)?zhí)崾?,阻止表單提交?/p>
this.checkFrom(freedomConfig,preWordorderData).then(canSubmit=>{ canSubmit&&postSubmitWorkorder(preWordorderData).then(res=>{ if(res.code===0){ showLoading() this.$router.push(`/detail/${res.data.id}`) } }) })
checkFrom 為我們的校驗(yàn)方法,循環(huán)遍歷預(yù)創(chuàng)建表單,從data里查看該字段是否有值,沒有的話就給于toast提示。并返回一個(gè)promise,resolve(false) 。如果都校驗(yàn)通過返回resolve(true) 。這樣就可以使checkFrom成為一個(gè)異步函數(shù)。
其中需要注意的是下拉框選擇后的值為大于0的數(shù)字、上傳圖片的屬性值是數(shù)組。一個(gè)動(dòng)態(tài)表單的創(chuàng)建、校驗(yàn)、數(shù)據(jù)整合就完成了。很多時(shí)候需要寫大量代碼的場(chǎng)景思路上很簡(jiǎn)單,反倒是抽象一個(gè)組件需要考慮的更多。
關(guān)于“如何使用Vue生成一個(gè)動(dòng)態(tài)表單”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“如何使用Vue生成一個(gè)動(dòng)態(tài)表單”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。