VUE element-ui之el-form复杂表单的校验，可动态添加删除

项目场景：

项目场景：一些大型的项目中，不仅仅是简单的 form表单校验，可能会有一些复杂的表单校验，如下图所示，带新增删除功能，同时删除新增的表单也需要做校验：

---

 关键点：

• 新增删除是对数组进行的操作，当然要遍历循环数组喽
• props正常是要对应某个form中的元素，此时要对应list中的元素，该如何对应??通过

  :prop="`machineList.${index}.***`"

• rules中的校验该如何校验呢:只能在元素中写上对应的校验，否则无法实现校验

---

代码实现：

data中数据如下：

dispatchForm: {
  machineList: []
}

form表单格式如下： 

<el-form
     :model="dispatchForm"
      label-width="120px"
      ref="dispatchForm"
    >
<div
            class="equip-class"
            v-for="(item, index) in dispatchForm.machineList"
            :key="index"
          >
            <el-row>
              <el-col :span="9">
                <el-form-item
                  label=""
                  :prop="`machineList.${index}.outFlag`"
                  :rules="{
                    required: true,
                    message: '请选择外机',
                    trigger: ['blur', 'change']
                  }"
                >
                  <el-select
                    :disabled="disabledFlag"
                    v-model="item.outFlag"
                    placeholder="请选择外机"
                    style="width: 100%" 
                  >
                    <el-option
                      v-for="item in curOutEqList"
                      :key="item.idFlag"
                      :label="item.goodsName"
                      :value="item.idFlag"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <div class="align-center">--</div>
              </el-col>
              <el-col :span="10">
                <el-form-item
                  label=""
                  :prop="`machineList.${index}.inEquipCode`"
                  :rules="{
                    required: true,
                    message: '请选择外机',
                    trigger: ['blur', 'change']
                  }"
                >
                  <el-select
                    :disabled="disabledFlag"
                    v-model="item.inEquipCode"
                    placeholder="请选择内机"
                    style="width: 100%"
                    multiple
                    collapse-tags
                  >
                    <el-option
                      :disabled="disabledFlag"
                      v-for="(item, index) in curInEqList"
                      :key="item.idFlag"
                      :label="item.goodsName"
                      :value="item.idFlag"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="1">
                <i
                  class="el-icon-remove-outline removeIcon"
                  @click="removeEquipment(index)"
                ></i>
              </el-col>
            </el-row>
          </div>
          <div class="addIcon" @click="addEquipment">
            <i class="el-icon-plus"></i>添加
          </div>
</el-form>

methods部分如下:

removeEquipment(index) {
      this.dispatchForm.machineList.splice(index, 1);
    },
addEquipment() {
       this.dispatchForm.machineList.push({
          outFlag: '',
          inEquipCode: []
        });
    },

好了，这样就可以把复杂表单的校验给实现了