如何使用Vue生成一个动态表单

这篇文章主要介绍了如何使用Vue生成一个动态表单的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何使用Vue生成一个动态表单文章都会有所收获，下面我们一起来看看吧。

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生成一个动态表单”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“如何使用Vue生成一个动态表单”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。