Verification of el-form complex forms of VUE element-ui, which can be dynamically added and deleted

Project scenario:

Project scenario: In some large-scale projects, not only simple form verification, but also some complex form verification, as shown in the figure below, with a new delete function, and deletion of the newly added form also requires proofreading test:

---

 key point:

• New deletion is an operation on the array, of course, it is necessary to traverse the loop array
• Normally, props should correspond to the elements in a certain form. At this time, they should correspond to the elements in the list. How should they correspond??

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

• How to verify the verification in rules: only the corresponding verification can be written in the element, otherwise the verification cannot be realized

---

Code:

The data in data is as follows:

dispatchForm: {
  machineList: []
}

The form format is as follows: 

<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>

The methods section is as follows:

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

Well, in this way, the verification of complex forms can be realized