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

原创已于 2024-06-13 14:26:38 修改 · 302 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-06-04 09:16:32 首次发布

vue element 专栏收录该内容

6 篇文章

订阅专栏

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

 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>

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