el-form动态表单的校验问题

正常情况下，我们校验都是使用prop，他是对应着表单域 model 字段，这是必填的。但是在动态添加删除表单中，我们的数据可能是下面的：

dynamicValidateForm: {

        company: '',

        cardTotalNum: ''

        cardTotalMoney: '',

        formRow: [

          { one: 'fad', two: '34', three: '0fasdf',four:'cd' },

          { one: 'fad', two: '34', three: '0fasdf',four:'cd' },

          { one: 'fad', two: '34', three: '0fasdf',four:'cd' }

          ],

      },

我们动态的添加删除 formRow字段，如果需要表单校验的话，你会怎么实现？prop绑定one,two,three???实际情况是不行的。

如果按照上面的情况的话，那么实际使用就应该：

<div

              v-for="(item, index) in dynamicValidateForm.formRow"

              :key="index"

              class="forList"

              style="position:relative;display:flex;"

            >

                <el-form-item label="印章：" :prop="`formRow.${index}.one`" :rules="rules.one">

                  <el-select

                    placeholder="请选择"

                    clearable

                    v-model="item.one"

                  >

                    <el-option label="0" value="0"></el-option>

                    <el-option label="2" value="2"></el-option>

                    <el-option label="5" value="5"></el-option>

                    <el-option label="10" value="10"></el-option>

                    <el-option label="20" value="20"></el-option>

                    <el-option label="30" value="30"></el-option>

                    <el-option label="50" value="50"></el-option>

                  </el-select>

                </el-form-item>

                <el-form-item label="印章名称："  :prop="`formRow.${index}.two`" :rules="rules.two">

                  <el-input v-model="item.two"></el-input>

                </el-form-item>

                <el-form-item label="份数：" :prop="`formRow.${index}.three`" :rules="rules.three">

                  <el-input

                    v-model="item.three"

                  ></el-input>

                </el-form-item>

                <el-form-item label="每份用印次数："   :prop="`formRow.${index}.four`" :rules="rules.four">

                  <el-input

                    v-model.number="item.four"

                  ></el-input>

                </el-form-item>

              <i

                v-if="index == 0"

                @click="addForm(index)"

                style="position:absolute;right:0;font-size:26px;line-height:120%;

    cursor: pointer;"

                class="el-icon-circle-plus-outline"

              ></i>

              <i

                v-else

                @click="removeForm(index)"

                style="position:absolute;right:0;font-size:26px;line-height:120%;

    cursor: pointer;"

                class="el-icon-remove-outline"

              ></i>

            </div>

这里 主要是使用了 :prop="`formRow.${index}.three`" :rules="rules.threeg的关键点。

那么问题又来了，我的遍历里面还有数组对象需要绑定呢，就是又多了一层可咋办？

我们可以继续往下绑定，比如： :prop="`formRow.${index}.formRow1.${index1}.three`" :rules="rules.threeg

🆗，就这样吧，这是实际工作中遇到的问题，再会！！