Vue如何生成一個動態(tài)表單

今天小編給大家分享一下Vue如何生成一個動態(tài)表單的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

數(shù)據(jù)接口設(shè)計

預(yù)備創(chuàng)建表單接口（其中字段解釋說明):

自我

名字

類型

標(biāo)題

提示消息(_ m)

選擇對象

{

代碼' :0,

msg': '成功，

數(shù)據(jù)' :{

list':[{

id':10，

名稱：'check_type  '，

鍵入：'select_item  '，

標(biāo)題' : '審核類型，

prompt_msg': '請?zhí)顚憣徍祟愋停?/p>

selectObj':[{

id':1，

項目' : '預(yù)審核'

},{

id':2，

項目' : '患者審核'

}],

val':null，

等級' :0

},{

id':16，

姓名：'bank_branch_info  '，

鍵入' : '字符串，

標(biāo)題' : '支行信息，

prompt_msg': '請?zhí)顚懼行畔ⅲ?/p>

selectObj':null，

val':null，

等級' :0

},{

id':19，

名稱： '項目_內(nèi)容'，

類型' : '多重，

標(biāo)題' : '項目內(nèi)容，

prompt_msg': '請?zhí)顚戫椖績?nèi)容，

selectObj':null，

val':null，

等級' :0

},{

id':22，

名稱：'project_extension_time  '，

鍵入' : '整數(shù)，

標(biāo)題' : '項目延長時間，

prompt_msg': '請?zhí)顚戫椖垦娱L時間，

selectObj':null，

val':null，

等級' :0

},{

id':24，

名稱' : '圖像，

鍵入' : '圖像，

標(biāo)題' : '圖片，

prompt_msg': '請上傳圖片，

selectObj':null，

val':null，

等級' :0

}]

}

}通過Vue動態(tài)組件渲染表單

現(xiàn)在預(yù)備創(chuàng)建表單接口文檔都了，該怎么渲染動態(tài)表單呢？動態(tài)表單的元素類型有5類，按照這個類別創(chuàng)建五個元素組件。

1. 上傳圖片組件

上傳圖片組件這里使用了上傳者組件。

模板

divclass='defaultimages  '

div  class='標(biāo)簽“{ item。title  } }/div

div  v-if='項。val==' null  ' class=' content  '

上傳者

:max-num='8 '

:user-imgs='project_image  '

@change='onUploadProject  '

/

/div

div-elseclass=' img-wrap  ' g

t; <imgv-for="(it,idx)initem.val":src="it":key="idx"@click="preview(idx,item.val)"> </div> </div> </template>

2. 多行輸入框組件

默認(rèn)多行輸入框為3行

<template>
<divv-if="item"class="defaultmultiple">
<divclass="lable">{{item.title}}</div>
<template>
<textarea
rows="3"
:placeholder="item.prompt_msg"
v-model="value"
:value="it.item">
</template>
</div>
</template>

3. 下拉選擇框組件

使用了element-ui的el-select

<template>
<divv-if="item"class="defaultselect_item">
<divclass="lableselect-lable">{{item.title}}</div>
<divclass="content">
<el-select
v-model="value"
placeholder="請選擇類型"
class="el-select-wrap"
size="mini"
@change="onChangeFirstValue"
>
<el-option
v-for="itinitem.selectObj"
:key="it.id"
:label="it.item"
:value="it.item">
</el-option>
</el-select>
</div>
</div>
</template>

其它兩個數(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'

再動態(tài)表單頁面統(tǒng)一引入，以Vue動態(tài)組件的形式進行渲染，is 屬性為動態(tài)組件名。

<template>
<divclass="g-container">
<component
v-for="(item,number)infreedomConfig"
:key="item.name"
:is="item.type"
:item="item"
:number="number"
@changeComponent="changeComponentHandle"
></component>
</div>
</template>
<script>
import*asitemElementsfrom'../../components/itemElement'
exportdefault{
components:itemElements,
}
</script>

上面完成后，動態(tài)表單展現(xiàn)出來了。表單是動態(tài)生成的，如何進行表單驗證，和表單數(shù)據(jù)的匯總呢？

表單數(shù)據(jù)匯總

再動態(tài)渲染組件的，傳入了number 參數(shù)，這個參數(shù)用來標(biāo)識當(dāng)前組件位于動態(tài)表單的第幾個，方便后期填入數(shù)據(jù)后，進行數(shù)據(jù)保存。

默認(rèn)value屬性值為空，對value進行監(jiān)聽，當(dāng)value變動的時 候進行emit，告訴父組件數(shù)據(jù)變更了，請保存。

data(){
return{
value:''
}
},
watch:{
value(v,o){
this.throttleHandle(()=>{
this.$emit('changeComponent',{
number:this.number,
value:this.$data.value
})
})
}
},

但是數(shù)據(jù)保存到哪里？怎么保存呢？ 讓后端給一個表單全部字段的接口，取到數(shù)據(jù)存到data中，每次數(shù)據(jù)更新就去查找是否存在這個字段，有的話就賦值保存起來。后面提交的時候，就提交這個對象。

表單校驗

提交的時候，希望用戶能夠把表單填完再調(diào)用提交接口，需要前端校驗是否填完沒有的話，就給響應(yīng)的toast請?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 為我們的校驗方法，循環(huán)遍歷預(yù)創(chuàng)建表單，從data里查看該字段是否有值，沒有的話就給于toast提示。并返回一個promise，resolve(false) 。如果都校驗通過返回resolve(true) 。這樣就可以使checkFrom成為一個異步函數(shù)。

其中需要注意的是下拉框選擇后的值為大于0的數(shù)字、上傳圖片的屬性值是數(shù)組。一個動態(tài)表單的創(chuàng)建、校驗、數(shù)據(jù)整合就完成了。很多時候需要寫大量代碼的場景思路上很簡單，反倒是抽象一個組件需要考慮的更多。

以上就是“Vue如何生成一個動態(tài)表單”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。