有些时候页面上有太多的表单元素，一个个的写太过繁琐，拿 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文件里的 最终被解析成了 , 的使用需要在 input 框中指定 id 属性

于是指定了一个 id 属性，再看控制台，警告消失

<el-input v-model="formInline[item.tableColumn]" :placeholder="item.placeholder":id="item.tableColumn"
></el-input>

The End！感谢参考的这几篇文章的作者，正是因为有你们的分享，像我这样的小白遇到问题时才得已解决，所以我也向你们学习，将遇到的问题记录下来，以加深印象，也能让需要的人得到参考！
由于时间有限，此例子可以做得更好，比如：动态实现下拉框、多选等…，类似代码生成器那种，有时间了琢磨下后再记录！