这篇文章主要介绍了如何使用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生成一个动态表单”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://www.xuebuyuan.com/3285051.html