使用Vue生成動(dòng)態(tài)表單
開需求會(huì)了,產(chǎn)品說這次需求的表單比較多,目前有18個(gè),后期的表單可能會(huì)有增加、修改。我作為這次的前端開發(fā),看到這樣的需求,心里知道要這樣搞不得把自己累死,首先表單居多,還會(huì)有變更,以后維護(hù)起來也讓人心力憔悴。
于是我提議做動(dòng)態(tài)表單,做一個(gè)表單的配置系統(tǒng),在系統(tǒng)里配置表單類型、表單得字段、以及對(duì)表單得管理。后來重新評(píng)審了需求,系統(tǒng)部分由后端自行開發(fā),我要處理的部分是動(dòng)態(tài)生成表單,展現(xiàn)提交的表單,以及對(duì)表單的處理情況。
數(shù)據(jù)接口設(shè)計(jì)
表單類型的接口就不用說了,這個(gè)比較簡單。我跟后端約定了一個(gè)預(yù)備創(chuàng)建工單接口,這個(gè)接口是后端告知前端,需要生成一個(gè)什么樣的表單。
預(yù)備創(chuàng)建表單接口(其中字段解釋說明):
id
name
type
title
prompt_msg
selectObj
{
"code": 0,
"msg": "success",
"data": {
"list": [{
"id": 10,
"name": "check_type",
"type": "select_item",
"title": "審核類型",
"prompt_msg": "請(qǐng)?zhí)顚憣徍祟愋?,
"selectObj": [{
"id": 1,
"item": "預(yù)審核"
}, {
"id": 2,
"item": "患者審核"
}],
"val": null,
"rank": 0
}, {
"id": 16,
"name": "bank_branch_info",
"type": "string",
"title": "支行信息",
"prompt_msg": "請(qǐng)?zhí)顚懼行畔?,
"selectObj": null,
"val": null,
"rank": 0
}, {
"id": 19,
"name": "project_content",
"type": "multiple",
"title": "項(xiàng)目內(nèi)容",
"prompt_msg": "請(qǐng)?zhí)顚戫?xiàng)目內(nèi)容",
"selectObj": null,
"val": null,
"rank": 0
}, {
"id": 22,
"name": "project_extension_time",
"type": "integer",
"title": "項(xiàng)目延長時(shí)間",
"prompt_msg": "請(qǐng)?zhí)顚戫?xiàng)目延長時(shí)間",
"selectObj": null,
"val": null,
"rank": 0
}, {
"id": 24,
"name": "images",
"type": "images",
"title": "圖片",
"prompt_msg": "請(qǐng)上傳圖片",
"selectObj": null,
"val": null,
"rank": 0
}]
}
}
通過Vue動(dòng)態(tài)組件渲染表單
現(xiàn)在預(yù)備創(chuàng)建表單接口文檔都了,該怎么渲染動(dòng)態(tài)表單呢?動(dòng)態(tài)表單的元素類型有5類,按照這個(gè)類別創(chuàng)建五個(gè)元素組件。
1. 上傳圖片組件
上傳圖片組件這里使用了 Uploader 組件。
<template>
<div class="default images">
<div class="lable">{{ item.title }}</div>
<div v-if="item.val === null" class="content">
<Uploader
:max-num="8"
:user-imgs="project_image"
@change="onUploadProject"
/>
</div>
<div v-else class="img-wrap">
<img v-for="(it, idx) in item.val" :src="it" :key="idx" @click="preview(idx, item.val)">
</div>
</div>
</template>
2. 多行輸入框組件
默認(rèn)多行輸入框?yàn)?行
<template>
<div v-if="item" class="default multiple">
<div class="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>
<div v-if="item" class="default select_item">
<div class="lable select-lable">{{ item.title }}</div>
<div class="content">
<el-select
v-model="value"
placeholder="請(qǐng)選擇類型"
class="el-select-wrap"
size="mini"
@change="onChangeFirstValue"
>
<el-option
v-for="it in item.selectObj"
:key="it.id"
:label="it.item"
:value="it.item">
</el-option>
</el-select>
</div>
</div>
</template>
其它兩個(gè)數(shù)字單行輸入框組件、文本單輸入框組件跟多行輸入框組件類似。
組件都創(chuàng)建好了,為了方便統(tǒng)一管理這些自定義組件。將組件們引入再導(dǎo)出,通過export default復(fù)合的形式。
// 單行文本輸入框組件
export { default as String } from './string.vue'
// 單行數(shù)字輸入框組件
export { default as Integer } from './integer.vue'
// 多行文本輸入框組件
export { default as Multiple } from './multiple.vue'
// 下拉列表選擇器組件
export { default as Select_item } from './select_item.vue'
// 上傳圖片組件
export { default as Images } from './images.vue'
再動(dòng)態(tài)表單頁面統(tǒng)一引入,以Vue動(dòng)態(tài)組件的形式進(jìn)行渲染, is 屬性為動(dòng)態(tài)組件名。
<template>
<div class="g-container">
<component
v-for="(item, number) in freedomConfig"
:key="item.name"
:is="item.type"
:item="item"
:number="number"
@changeComponent="changeComponentHandle"
></component>
</div>
</template>
<script>
import * as itemElements from '../../components/itemElement'
export default {
components: itemElements,
}
</script>
上面完成后,動(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í)候需要寫大量代碼的場景思路上很簡單,反倒是抽象一個(gè)組件需要考慮的更多。
總結(jié)
以上所述是小編給大家介紹的使用Vue生成動(dòng)態(tài)表單,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
vue?this.$router六種方法使用示例總結(jié)分析
這篇文章主要為大家介紹了vue this.$router六種方法使用示例總結(jié)分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
vue 防止頁面加載時(shí)看到花括號(hào)的解決操作
這篇文章主要介紹了vue 防止頁面加載時(shí)看到花括號(hào)的解決操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
深入理解vue輸入框字符限制的優(yōu)化設(shè)計(jì)方案
限制輸入框字符是一項(xiàng)需要結(jié)合技術(shù)實(shí)現(xiàn)與用戶體驗(yàn)的綜合設(shè)計(jì),通過實(shí)時(shí)限制、提交校驗(yàn)與性能優(yōu)化,開發(fā)者可以高效解決輸入限制問題,同時(shí)提升用戶滿意度和數(shù)據(jù)安全性,本文給大家介紹vue輸入框字符限制的優(yōu)化設(shè)計(jì),感興趣的朋友跟隨小編一起看看吧2024-12-12
Vue3+Element?Plus按需引入(自動(dòng)導(dǎo)入)詳解
element-plus根據(jù)官網(wǎng)文檔,推薦用戶采用按需導(dǎo)入的方式進(jìn)行導(dǎo)入,下面這篇文章主要給大家介紹了關(guān)于Vue3+Element?Plus按需引入(自動(dòng)導(dǎo)入)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
vue跳轉(zhuǎn)時(shí)根據(jù)url錨點(diǎn)(#xxx)實(shí)現(xiàn)頁面內(nèi)容定位的方法
本前端仔在做頁面跳轉(zhuǎn)的時(shí)候,被要求跳轉(zhuǎn)到頁面時(shí)候,把對(duì)應(yīng)部分的內(nèi)容自動(dòng)滾動(dòng)到頂部,我一開始想到的就是根據(jù)錨點(diǎn)<a href="#xxid">進(jìn)行處理,但是發(fā)現(xiàn)不太好實(shí)現(xiàn),于是便自己研究了一個(gè)比較取巧的方法,需要的朋友可以參考下2024-04-04
vue實(shí)現(xiàn)發(fā)表評(píng)論功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)發(fā)表評(píng)論功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
關(guān)于pinia的使用和持久化方式(pinia-plugin-persistedstate)
本文介紹了Pinia的使用方法,包括安裝和配置插件pinia-plugin-persistedstate,以及在項(xiàng)目中創(chuàng)建和使用Store模塊,同時(shí),還講解了Pinia的state、getters和actions的使用,并提供了在uniapp中使用持久化插件的總結(jié)2025-02-02

