Verificação de formas complexas de el-form de VUE element-ui, que podem ser adicionadas e excluídas dinamicamente

Cenário do projeto:

Cenário do projeto: Em alguns projetos de grande escala, não apenas a verificação de formulário simples, mas também alguma verificação de formulário complexo, conforme mostrado na figura abaixo, com uma nova função de exclusão, e a exclusão do formulário recém-adicionado também requer teste de revisão:

---

 ponto chave:

• A nova exclusão é uma operação no array, é claro, é necessário percorrer o loop array
• Normalmente, props devem corresponder aos elementos de uma determinada forma. Neste momento, eles devem corresponder aos elementos da lista. Como eles devem corresponder?

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

• Como verificar a verificação em regras: somente a verificação correspondente pode ser escrita no elemento, caso contrário a verificação não pode ser realizada

---

Código:

Os dados em dados são os seguintes:

dispatchForm: {
  machineList: []
}

O formato do formulário é o seguinte: 

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

A seção de métodos é a seguinte:

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

Bem, desta forma, a verificação de formas complexas pode ser realizada