element ui 动态添加的表单元素验证

<el-form-item
      v-for="(item, index) in maintenanceForm.docTypeList"
      :key="index"
      :label="$i18n.locale === 'zh-CN' ? item.docTypeCName : item.docTypeEName"
      required
      class="d2-mb-0"
    >
      <el-form-item
        class="d2-mr-0"
        :prop="'docTypeList.' + index + '.strVal'"
        :rules="{ required: true, message: `请输入${$i18n.locale === 'zh-CN' ? item.docTypeCName : item.docTypeEName}`, trigger: 'blur' }"
      >
        <div class="form-item-contain">
          <el-input
            v-model="item.strVal"
            :placeholder="`请输入${$i18n.locale === 'zh-CN' ? item.docTypeCName : item.docTypeEName}编码`"
            class="d2-mr"
            style="width: 178px"
            @input="change($event, index)"
          ></el-input>
        </div>
      </el-form-item>
    </el-form-item>

element ui 使用 v-for 生成的表单元素,一开始不太清楚是怎么做验证,后查找资料发现是用如下方法,主要注意一下两个属性:

:prop="'docTypeList.' + index + '.strVal'"
:rules="{ required: true, message: `请输入${$i18n.locale === 'zh-CN' ? item.docTypeCName : item.docTypeEName}`, trigger: 'blur' }"      

prop 需要绑定, 绑定规则为 v-for 循环的数组 ‘docTypeList.’ (‘注意在数组后面要加点 .’) + index (数组下标) + ‘.strVal’ (当前需要做验证的输入框)

可以通过打印 this.$refs[‘form名称’].fields 查看每个组件的 prop