Vue如何生成一个动态表单

今天小编给大家分享一下Vue如何生成一个动态表单的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

数据接口设计

预备创建表单接口（其中字段解释说明):

自我

名字

类型

标题

提示消息(_ m)

选择对象

{

代码' :0,

msg': '成功，

数据' :{

list':[{

id':10，

名称：'check_type  '，

键入：'select_item  '，

标题' : '审核类型，

prompt_msg': '请填写审核类型，

selectObj':[{

id':1，

项目' : '预审核'

},{

id':2，

项目' : '患者审核'

}],

val':null，

等级' :0

},{

id':16，

姓名：'bank_branch_info  '，

键入' : '字符串，

标题' : '支行信息，

prompt_msg': '请填写支行信息，

selectObj':null，

val':null，

等级' :0

},{

id':19，

名称： '项目_内容'，

类型' : '多重，

标题' : '项目内容，

prompt_msg': '请填写项目内容，

selectObj':null，

val':null，

等级' :0

},{

id':22，

名称：'project_extension_time  '，

键入' : '整数，

标题' : '项目延长时间，

prompt_msg': '请填写项目延长时间，

selectObj':null，

val':null，

等级' :0

},{

id':24，

名称' : '图像，

键入' : '图像，

标题' : '图片，

prompt_msg': '请上传图片，

selectObj':null，

val':null，

等级' :0

}]

}

}通过Vue动态组件渲染表单

现在预备创建表单接口文档都了，该怎么渲染动态表单呢？动态表单的元素类型有5类，按照这个类别创建五个元素组件。

1. 上传图片组件

上传图片组件这里使用了上传者组件。

模板

divclass='defaultimages  '

div  class='标签“{ item。title  } }/div

div  v-if='项。val==' null  ' class=' content  '

上传者

:max-num='8 '

:user-imgs='project_image  '

@change='onUploadProject  '

/

/div

div-elseclass=' img-wrap  ' g

t; <imgv-for="(it,idx)initem.val":src="it":key="idx"@click="preview(idx,item.val)"> </div> </div> </template>

2. 多行输入框组件

默认多行输入框为3行

<template>
<divv-if="item"class="defaultmultiple">
<divclass="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>
<divv-if="item"class="defaultselect_item">
<divclass="lableselect-lable">{{item.title}}</div>
<divclass="content">
<el-select
v-model="value"
placeholder="请选择类型"
class="el-select-wrap"
size="mini"
@change="onChangeFirstValue"
>
<el-option
v-for="itinitem.selectObj"
:key="it.id"
:label="it.item"
:value="it.item">
</el-option>
</el-select>
</div>
</div>
</template>

其它两个数字单行输入框组件、文本单输入框组件跟多行输入框组件类似。

组件都创建好了，为了方便统一管理这些自定义组件。将组件们引入再导出，通过export default复合的形式。

//单行文本输入框组件
export{defaultasString}from'./string.vue'
//单行数字输入框组件
export{defaultasInteger}from'./integer.vue'
//多行文本输入框组件
export{defaultasMultiple}from'./multiple.vue'
//下拉列表选择器组件
export{defaultasSelect_item}from'./select_item.vue'
//上传图片组件
export{defaultasImages}from'./images.vue'

再动态表单页面统一引入，以Vue动态组件的形式进行渲染，is 属性为动态组件名。

<template>
<divclass="g-container">
<component
v-for="(item,number)infreedomConfig"
:key="item.name"
:is="item.type"
:item="item"
:number="number"
@changeComponent="changeComponentHandle"
></component>
</div>
</template>
<script>
import*asitemElementsfrom'../../components/itemElement'
exportdefault{
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的数字、上传图片的属性值是数组。一个动态表单的创建、校验、数据整合就完成了。很多时候需要写大量代码的场景思路上很简单，反倒是抽象一个组件需要考虑的更多。

以上就是“Vue如何生成一个动态表单”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。