对象格式的数据表单循环校验

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

 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>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值