动态表单需求及实现思路
我的项目有一个通用的 form 组件，内部渲染了海量的 form 元素，有input、checkbox、select，radio 等等。
这个 form 组件，在不同的页面要根据需求展示不同的表单元素。
这样一个复杂的组件，我肯定不能手动排版啊。
于是果断跟后台商量一下，通过后台返回的 json 数据来动态渲染页面的表单元素，另外一些不方便返回的数据，本地写个 json。
比如这种：
[{type:input,value:'',default:0,describle:'请输入年龄'，size:'middle'},{type:select,value:'',default:'北京',describle:'请选择城市'，size:'middle',options:['北京','天津']},...]然后我们遍历这个 json 数据，根据 type 字段渲染出表单元素就行了。
写完美滋滋。
一个问题
一提交数据，发现后端验证不通过。
打开 network，看看何方妖孽在兴风作浪？
结果发现因为项目用的是 vue，由于所有的表单数据都会定义在 data 函数的 form属性下，比如：
data(){return{form:{username:'',userRole:'',ifLoginForbid:false,....}}}导致在使用 axios 提交数据时把所有的表单的数据一起提交了，这里的 form 是几个页面共有的所有的数据。
因为页面通过各种 v-for 来动态的生成了当前页面需要的表单元素，但 data 中定义的数据在提交的时候不好进行判断。
如果手动去写各种 if 条件判断来提交哪些数据，过滤哪些数据，判断太多，代码笨重还不好维护。
怎么解决
所以就想到使用 form 自带的 submit，嘿嘿嘿嘿。
因为 form 自带的 submit 是根据页面存在的元素来提交数据的，如果我们使用这个 submit 方法，先把后台需要的数据动态的采集出来，那不就相当于给 data 中定义的 form 加了一层过滤吗？
所以能够完美的解决我的需求。
那么，问题是在 vue 中如何使用 form 的 submit 来获取数据呢？
首先，我们有一个 form 表单，表单所有的元素都有 name 属性。
<formaction="####"@submit.prevent="submitform"ref="form"><el-inputtype="text"v-model="username"name="username"><el-selectv-model="userRole"placeholder="请选择"name=""userRole><el-optionv-for="iteminuserRoleList":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-checkboxv-model="ifLoginForbid"name="ifLoginForbid">禁止登录？</el-checkbox><inputtype="submit"value=""v-show="false"@click="submitform"></form>
然后，通过手动调用 this.submitform() 来获取 form 表单中的数据
...methods:{submitform(){//通过FormData取得相应的form上的数据constformData=newFormData(this.$refs['form'])constdata={}//entries返回一个iterator对象，此对象可以遍历访问FormData中的键值对for(let[key,val]offormData.entries()){console.log([key,val])Object.assign(data,{[key]:val})}returndata//{username:''username'',userRole:1}}}疑？？ 我的 ifLoginForbid 去了哪里～～打印下看看
console.log(formData.getKey('ifLoginForbid'))//null是个 null值，这就离谱了。
查看下元素，发现 checkbox 是未选中的状态，那是不是应为没选中的原因导致 formData 根本没有拿到这个数据呢？
那我勾选这个 checkbox 后再测试一波
console.log(formData.getKey('ifLoginForbid'))//''汰！这不科学啊，居然是个空字符！checkbox 绑定的不应该是个 boolean 类型的值吗？
再次查看元素，看看是哪个刁民又在害我。
发现选中状态的 el-checkbox 里的 input 是这样：
<inputtype="checkbox"aria-hidden="false"class="el-checkbox__original"value="">
这是组件变异太深了吗？ 没有探入的去研究。但我知道正常的 input 大概是这样：
<inputtype="checkbox":checked="checked":name="name"@change="change":value="checked"/>
所以依照上面的规则，我自己实现了一个 myCheckbox 组件：
<template><inputtype="checkbox":name="name":checked="checked":value="checked"@change="change"/></template><script>exportdefault{props:{checked:{type:Boolean},name:{type:String}},model:{prop:'checked',event:'change'},methods:{change(e){this.$emit('change',e.target.checked)}}}</script>在父组件里使用：
<component:is="'myCheckbox'"v-model="checked":name="'ifLoginForbid'"/>
再次查看formData.getKey('ifLoginForbid') // true
成功了，这次我们成功的获取到了页面所有的表单元素的数据，生成了要提交给后台的 data。nice～～
作者：晴天同学