優雅地用Vue生成動態表單

需求背景

開需求會了，產品說此次需求的表單比較多，目前有18個，後期的表單可能會有增長、修改。我做爲此次的前端開發，看到這樣的需求，內心知道要這樣搞不得把本身累死，首先表單居多，還會有變動，之後維護起來也讓人心力憔悴。

因而我提議作動態表單，作一個表單的配置系統，在系統裏配置表單類型、表單得字段、以及對錶單得管理。後來從新評審了需求，系統部分由後端自行開發，我要處理的部分是動態生成表單，展示提交的表單，以及對錶單的處理狀況。

數據接口設計

表單類型的接口就不用說了，這個比較簡單。我跟後端約定了一個預備建立工單接口，這個接口是後端告知前端，須要生成一個什麼樣的表單。

預備建立表單接口（其中字段解釋說明）：

• id 表單字段的id
• name 表單字段的名稱（存數據庫的字段名）
• type 表單字段的類型（select_item下拉列表、string單行文本、multiple多行文本、integer單行數字、images上傳圖片）
• title 表單字段的中文名（動態表單的字段名稱）
• prompt_msg 表單字段的placeholder文案
• selectObj type類型爲select_item的時候，selectObj有值，默認爲null

{
	"code": 0,
	"msg": "success",
	"data": {
		"list": [{
			"id": 10,
			"name": "check_type",
			"type": "select_item",
			"title": "審覈類型",
			"prompt_msg": "請填寫審覈類型",
			"selectObj": [{
				"id": 1,
				"item": "預審覈"
			}, {
				"id": 2,
				"item": "患者審覈"
			}],
			"val": null,
			"rank": 0
		}, {
			"id": 16,
			"name": "bank_branch_info",
			"type": "string",
			"title": "支行信息",
			"prompt_msg": "請填寫支行信息",
			"selectObj": null,
			"val": null,
			"rank": 0
		},  {
			"id": 19,
			"name": "project_content",
			"type": "multiple",
			"title": "項目內容",
			"prompt_msg": "請填寫項目內容",
			"selectObj": null,
			"val": null,
			"rank": 0
		}, {
			"id": 22,
			"name": "project_extension_time",
			"type": "integer",
			"title": "項目延長時間",
			"prompt_msg": "請填寫項目延長時間",
			"selectObj": null,
			"val": null,
			"rank": 0
		}, {
			"id": 24,
			"name": "images",
			"type": "images",
			"title": "圖片",
			"prompt_msg": "請上傳圖片",
			"selectObj": null,
			"val": null,
			"rank": 0
		}]
	}
}
複製代碼

經過Vue動態組件渲染表單

如今預備建立表單接口文檔都了，該怎麼渲染動態表單呢？動態表單的元素類型有5類，按照這個類別建立五個元素組件。

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. 多行輸入框組件

默認多行輸入框爲3行

<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="請選擇類型" 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>
複製代碼

其它兩個數字單行輸入框組件、文本單輸入框組件跟多行輸入框組件相似。

組件都建立好了，爲了方便統一管理這些自定義組件。將組件們引入再導出，經過export default複合的形式。

// 單行文本輸入框組件
export { default as String } from './string.vue'  

// 單行數字輸入框組件
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' 
複製代碼

再動態表單頁面統一引入，以Vue動態組件的形式進行渲染，is屬性爲動態組件名。

<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>
複製代碼

上面完成後，動態表單展示出來了。表單是動態生成的，如何進行表單驗證，和表單數據的彙總呢？

表單數據彙總

再動態渲染組件的，傳入了 number 參數，這個參數用來標識當前組件位於動態表單的第幾個，方便後期填入數據後，進行數據保存。

默認value屬性值爲空，對value進行監聽，當value變更的時 候進行emit，告訴父組件數據變動了，請保存。

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

可是數據保存到哪裏？怎麼保存呢？ 讓後端給一個表單所有字段的接口，取到數據存到data中，每次數據更新就去查找是否存在這個字段，有的話就賦值保存起來。後面提交的時候，就提交這個對象。

表單校驗

提交的時候，但願用戶可以把表單填完再調用提交接口，須要前端校驗是否填完沒有的話，就給響應的toast請提示，阻止表單提交。

this.checkFrom(freedomConfig, preWordorderData).then(canSubmit => {
    canSubmit && postSubmitWorkorder(preWordorderData).then(res => {
        if (res.code === 0) {
            showLoading()
            this.$router.push(`/detail/${res.data.id}`)
        }
    })
})
複製代碼

checkFrom爲咱們的校驗方法，循環遍歷預建立表單，從data裏查看該字段是否有值，沒有的話就給於toast提示。並返回一個promise，resolve(false)。若是都校驗經過返回 resolve(true)。這樣就可使checkFrom成爲一個異步函數。

其中須要注意的是下拉框選擇後的值爲大於0的數字、上傳圖片的屬性值是數組。

一個動態表單的建立、校驗、數據整合就完成了。不少時候須要寫大量代碼的場景思路上很簡單，反卻是抽象一個組件須要考慮的更多。