有些時候頁面上有太多的表單元素，一個個的寫太過繁瑣，拿 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！感謝參考的這幾篇文章的作者，正是因為有你們的分享，像我這樣的小白遇到問題時才得已解決，所以我也向你們學習，將遇到的問題記錄下來，以加深印象，也能讓需要的人得到參考！
由于時間有限，此例子可以做得更好，比如：動態實現下拉框、多選等…，類似代碼生成器那種，有時間了琢磨下后再記錄！