?首先我們的代碼數據是這樣的（直接和后臺對應）

 ruleForm: { roadList: {vehicle: {name:"機動車",width: 0,length:0,area:0},notVehicle: {name:"非機動車",width: 0,length:0,area:0},walk: {name:"人行道",width: 0,length:0,area:0},other: {name: "其他"width: 0,length:0,area:0}}, },

?html 代碼處理

  <template v-for="(item, key, index) in ruleForm.roadList"><tr><th>施工長度<p class="unit">({{item.name}})</p></th><td>// prop 中 roadList. 就是最上面綁定的數據 fuleForm.roadList   key 就是對應的roadList中具體某個對象， .length就對象中的具體字段<el-form-item :prop="'roadList.' + key + '.length'" :rules="{ required: true, message: '請輸入施工長度', trigger: 'blur' }"> // 其中rules校驗，如果是綁定到el-form 標簽上需要定義名字，而這個是動態類型的直接寫的標簽上更方便<div class="flex"><el-input placeholder="請輸入施工長度" type="number" v-model.number="item.length" clearable :disabled="disabled" @input="changeArea(arguments,item)" autocomplete="off"></el-input><span class="unit">米</span></div></el-form-item></td> </tr></template>

換個思路如果前端頁面遇到需要展示的內容是可以循環展示的，但是后臺的數據不是數組形式的，我們就可以用這樣的方式靈活處理