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

2. 多行输入框组件

默认多行输入框为3行

3. 下拉选择框组件

使用了element-ui的el-select

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

组件都创建好了，为了方便统一管理这些自定义组件。将组件们引入再导出，通过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生成一个动态表单"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。