如何使用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;
2. 多行输入框组件
默认多行输入框为3行
{{item.title}}
3. 下拉选择框组件
使用了element-ui的el-select
{{item.title}}
其它两个数字单行输入框组件、文本单输入框组件跟多行输入框组件类似。
组件都创建好了,为了方便统一管理这些自定义组件。将组件们引入再导出,通过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 属性为动态组件名。
上面完成后,动态表单展现出来了。表单是动态生成的,如何进行表单验证,和表单数据的汇总呢?
表单数据汇总
再动态渲染组件的,传入了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生成一个动态表单”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。
当前文章:如何使用Vue生成一个动态表单-创新互联
网页地址:http://scyanting.com/article/shdos.html