召开了需求会。 根据产品，这次需求的表格比较多，现在有18个。 后期的表格有增加、修正的可能性。 我心里知道，作为这次前端开发，看到这样的需求，不能这样让自己疲惫不堪。 首先表单很多，也有变更，今后的维护也会让人心情憔悴。
因此我提出了制作动态表单，制作表单的配置系统，在系统中配置表单类型、表单的字段、表单的管理。 之后，重新审视了需求，系统部分由后端独自开发。 我要处理的部分是动态生成表单，显示提交的表单，以及表单的处理情况。
数据接口设计
表单类型的接口是当然的，但这比较简单。 我答应了在后端创建任务的接口。 该接口将后端告知前端，需要生成什么样的表单。
创建窗体接口。 其中字段说明：
id
名字
类型
标题
prompt_msg
selectObj
{
'代码' :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 '，
'类型' : '字符串'，
“title': '分店信息”，
'请填写prompt_msg': '分行信息'，
' selectobj ' :空值，
' val': null，
' rank': 0
、{
' id': 19，
' name': 'project_content '，
'类型' : ' multiple '，
' title': '项目内容'，
请填写' prompt_msg': '项目内容'，
' selectObj': null，
' val': null，
' rank': 0
、{
' id': 22，
' name ' : ' project _ extension _ time '，
' type': 'integer '，
“title': '项目延长时间”，
请填写' prompt_msg': '项目延长时间'。
' selectobj ' :空值，
' val': null，
' rank': 0
、{
' id': 24，
' name': 'images '是，
' type': 'images '是，
“title': '图像”，
请上传' prompt_msg': '图像'，
' selectobj ' :空值，
' val': null，
' rank': 0
() ) ]
}
}
使用Vue动态组件渲染窗体
现在，您已经准备好创建表单接口文档了。 我应该如何呈现动态表单？ 动态窗体的元素类型有五个类别，根据这些类别创建五个元素组件。
1 .上传图像组件
上传图像的组件这里使用的是Uploader组件。
{{ item.title }}
:max-num='8'
:user-imgs='project_image '
@change='onUploadProject '
/
2 .多行输入框组件
默认的多行输入框为三行
{{ item.title }}
rows='3'
3360 placeholder=' item.prompt _ msg '
v-model='value '
:value='it.item '
3 .下拉组合箱组件
使用element-ui的el-select
{{ item.title }}
v-model='value '
placeholder='请选择类型'
class='el-sele
ct-wrap"size="mini"
@change="onChangeFirstValue"
>
v-for="it in item.selectObj"
:key="it.id"
:label="it.item"
:value="it.item">
其它两个数字单行输入框组件、文本单输入框组件跟多行输入框组件类似。
组件都创建好了，为了方便统一管理这些自定义组件。将组件们引入再导出，通过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 属性为动态组件名。
v-for="(item, number) in freedomConfig"
:key="item.name"
:is="item.type"
:item="item"
:number="number"
@changeComponent="changeComponentHandle"
>
import * as itemElements from '../../components/itemElement'
export default {
components: itemElements,
}
上面完成后，动态表单展现出来了。表单是动态生成的，如何进行表单验证，和表单数据的汇总呢？
表单数据汇总
再动态渲染组件的，传入了 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的数字、上传图片的属性值是数组。
一个动态表单的创建、校验、数据整合就完成了。很多时候需要写大量代码的场景思路上很简单，反倒是抽象一个组件需要考虑的更多。
总结
以上所述是小编给大家介绍的使用Vue生成动态表单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！