开需求会了，产品说这次需求的表单比较多，目前有18个，后期的表单可能会有增加、修改。我作为这次的前端开发，看到这样的需求，心里知道要这样搞不得把自己累死，首先表单居多，还会有变更，以后维护起来也让人心力憔悴。
于是我提议做动态表单，做一个表单的配置系统，在系统里配置表单类型、表单得字段、以及对表单得管理。后来重新评审了需求，系统部分由后端自行开发，我要处理的部分是动态生成表单，展现提交的表单，以及对表单的处理情况。
数据接口设计
表单类型的接口就不用说了，这个比较简单。我跟后端约定了一个预备创建工单接口，这个接口是后端告知前端，需要生成一个什么样的表单。
预备创建表单接口（其中字段解释说明）：
id
name
type
title
prompt_msg
selectObj
{ "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> <div>{{ item.title }}</div> <div v-if="item.val === null"> <Uploader :max-num="8" :user-imgs="project_image" @change="onUploadProject" /> </div> <div v-else> <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"> <div>{{ 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"> <div>{{ item.title }}</div> <div> <el-select v-model="value" placeholder="请选择类型" 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> <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，告诉父组件数据变更了，请保存。