优雅地用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的数字、上传图片的属性值是数组。

一个动态表单的建立、校验、数据整合就完成了。不少时候须要写大量代码的场景思路上很简单，反却是抽象一个组件须要考虑的更多。