首先我们的代码数据是这样的（直接和后台对应）

 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>

换个思路如果前端页面遇到需要展示的内容是可以循环展示的，但是后台的数据不是数组形式的，我们就可以用这样的方式灵活处理