这篇文章给大家介绍使用Vue怎么生成一个动态表单,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

数据接口设计
预备创建表单接口(其中字段解释说明):
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 组件。
{{ item.title }}![]()
2. 多行输入框组件
默认多行输入框为3行
{{ item.title }}
3. 下拉选择框组件
使用了element-ui的 el-select
{{ item.title }}
其它两个数字单行输入框组件、文本单输入框组件跟多行输入框组件类似。
组件都创建好了,为了方便统一管理这些自定义组件。将组件们引入再导出,通过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 属性为动态组件名。
上面完成后,动态表单展现出来了。表单是动态生成的,如何进行表单验证,和表单数据的汇总呢?
表单数据汇总
再动态渲染组件的,传入了 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怎么生成一个动态表单就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
网站名称:使用Vue怎么生成一个动态表单-创新互联
分享URL:http://www.jxjierui.cn/article/pigeg.html


咨询
建站咨询
