有些时候页面上有太多的表单元素，一个个的写太过繁琐，拿 input 框举例，众多的 input 框，无非就是输入框前的说明和 input 框的 name 属性不一样
<el-form :inline="true" :model="formInline" size="mini" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="formInline.name1" placeholder="请输入姓名"></el-input>
</el-form-item>
<!-- 当然，这里的性别应该下拉框，这里只做演示 -->
<el-form-item label="性别">
<el-input v-model="formInline.sex1" placeholder="请选择性别"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="formInline.age1" placeholder="请输入年龄"></el-input>
</el-form-item>
</el-form>
既然这样，何不弄一个数组，通过 for 循环遍历出来，岂不是更省事？经过一番尝试，终于成功，特此记录，便于后续回顾及帮助到有需要的人。
1、通过 for 循环批量生成表单元素
模拟如下数据：
export default {
name: 'BasicInfo',
components: {},
data() {
return {
formInline: {
},
formData: [
{"id":"1","label":"姓名","tableColumn":"name","placeholder":""},
{"id":"2","label":"性别","tableColumn":"sex","placeholder":"请选择性别"},
{"id":"3","label":"年龄","tableColumn":"age","placeholder":"请输入年龄"}
]
}
},
}
页面也改成 v-for 来遍历
<el-form :inline="true" :model="formInline" size="mini" class="demo-form-inline">
<el-form-item
v-for="item in formData"
:index="item.id"
:key="item.id"
:label="item.label"
>
<el-input
v-model="item.tableColumn"
:placeholder="item.placeholder"
></el-input>
</el-form-item>
</el-form>
2、发现呈现的效果与预期的不符合
参考了几篇网友的解答
vue.js中 v-for 下的v-model 双向绑定失效的解决方法
v-for渲染input的坑！！！vue中v-for出来的input如何实现双向绑定
vue for循环v-model双向绑定对象/数组失效
后面自己试了下，改了下 v-bind 处的写法后，就可以了
3、修改 v-bind 处的写法
<el-form :inline="true" :model="formInline" size="mini" class="demo-form-inline">
<el-form-item
v-for="item in formData"
:index="item.id"
:key="item.id"
:label="item.label"
>
<el-input
v-model="formInline[item.tableColumn]"
:placeholder="item.placeholder"
></el-input>
</el-form-item>
</el-form>
4、最终效果与预期一致：
借助 Vue 开发工具可以看到，已经实现了双向绑定
5、探索其他问题
看了前面几篇博客，有的往 标签里动态绑定了一个 prop 属性，刚开始不清楚啥意思，看了下文档说用于表单校验和重置表单的
于是就做了下测试：
<el-form-item
v-for="item in formData"
:index="item.id"
:key="item.id"
:label="item.label"
:prop="item.tableColumn"
:required="item.required"
inline-message="true"
:rules="{ required: true, message: `${item.label}不能为空`}"
>
<!-- :rules="[
{ required: true, message: '年龄不能为空'},
{ type: 'number', message: '年龄必须为数字值'},
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]" -->
<el-input
v-model="formInline[item.tableColumn]"
:placeholder="item.placeholder"
></el-input>
</el-form-item>
结果证实了
6、绑定 prop 属性后浏览器会有莫名其妙的红色警告问题
此问题参考了这篇文章：
The label’s for attribute doesn’t match any element id…的解决办法
打开浏览器开发者工具，可以看到，vue文件里的 最终被解析成了
<el-input
v-model="formInline[item.tableColumn]"
:placeholder="item.placeholder"
:id="item.tableColumn"
></el-input>
The End！感谢参考的这几篇文章的作者，正是因为有你们的分享，像我这样的小白遇到问题时才得已解决，所以我也向你们学习，将遇到的问题记录下来，以加深印象，也能让需要的人得到参考！
由于时间有限，此例子可以做得更好，比如：动态实现下拉框、多选等…，类似代码生成器那种，有时间了琢磨下后再记录！
