vue2+element表单，循环多个el-form-item并校验或校验多个表单

循环多个el-form-item并校验

表单样式

 <div class="addAbroad">
        <el-button
          type="primary"
          round
          size="mini"
          icon="el-icon-plus"
          @click="addModule()"
          >添加情况</el-button
        >
      </div>
 <el-form
        label-width="180px"
        :model="AbroadItem"
        ref="AbroadItem"
        :rules="AbroadRules" //***规则名***
        ><div class="edabroadModule">
          <el-form-item
            v-for="(item, goAbroadId) in AbroadItem.AbroadLists"
             //*****重点*****不能直接写(item, goAbroadId) in AbroadLists
            :key="goAbroadId"  //*****重点*****对应下标
            class="AbroadItem"
          >
            <div class="editAbroadItem">
                <el-form-item
                  label="开始时间："
                  :rules="AbroadRules.goAbroadStartDate"//*****重点*****
                  :prop="`AbroadLists.${goAbroadId}.goAbroadStartDate`"//*****重点*****
                  //AbroadRules:规则名rules，goAbroadId：对应下标
                >
                  <el-date-picker
                    value-format="yyyy-MM-dd"
                    v-model="item.goAbroadStartDate"
                    placeholder="开始时间："
                    type="date"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item
                  label="结束时间"
                  :rules="AbroadRules.goAbroadEndDate" //*****重点*****
                  :prop="`AbroadLists.${goAbroadId}.goAbroadEndDate`"//*****重点*****
                >
                  <el-date-picker
                    value-format="yyyy-MM-dd"
                    v-model="item.goAbroadEndDate"
                    placeholder="结束时间："
                    type="date"
                  >
                  </el-date-picker
                ></el-form-item>
              <i class="el-icon-delete" @click="deleteModule(goAbroadId)"></i>
            </div>
            <div>
              <el-image
                style="width: 90%; height: 6px"
                :src="require('../../assets/img/line.png')"
              ></el-image>
            </div>
          </el-form-item></div
      ></el-form>

校验rules

 AbroadRules: {
        goAbroadStartDate: [
          { required: true, message: "必填", trigger: "blur" },
        ],
        goAbroadEndDate: [{ required: true, message: "必填", trigger: "blur" }],
        goAbroadStateUnit: [
          { required: true, message: "必填", trigger: "blur" },
        ],
        goAbroadGoal: [{ required: true, message: "必填", trigger: "blur" }],
        goAbroadMoneySource: [
          { required: true, message: "必填", trigger: "blur" },
        ],
        goAbroadExamineUnit: [
          { required: true, message: "必填", trigger: "blur" },
        ],
      },

添加、删除、和保存时校验的方法

 // 添加---添加方式是重点，直接添加一个空对象{}，找不到对应的下标
    addModule() {
      this.AbroadItem.AbroadLists.push(Object.assign({}, this.AbroadItemObj));
    },
    // 删除--行
    deleteModule(index) {
      this.AbroadItem.AbroadLists.splice(index, 1);
    },

   <div class="editButton">
      <el-button
        size="small"
        type="primary"
        icon="el-icon-thumb"
        @click="submitForm('AbroadItem')" //*****重点*****要写参数
        >保存</el-button
      >
    </div>
   // 保存方法
    submitForm(AbroadItem) {//*****重点*****要写对应一致的参数
      this.$refs[AbroadItem].validate((valid) => {
        if (valid) {
        //这里是转map结构，如不需要可忽略
          var AbroadMap = new Map();
          AbroadMap.set(this.goAbroadPeopleNum, this.AbroadItem.AbroadLists);
          let obj = Object.create(null);
          for (let [k, v] of AbroadMap) {
            obj[k] = v;
          }
          let specialty = JSON.stringify(obj); //
          saveAbroadInfo(specialty)
            .then((res) => {
              if (res.status == 200) {
                this.loading = false;
                this.$message({
                  type: "success",
                  message: res.message,
                });
              } else {
                this.$message({
                  type: "info",
                  message: res.message,
                });
              }
            })
            .catch((err) => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },

校验多个表单并循环多个el-form-item

保存的点击事件

 <div class="editButton">
      <el-button
        size="small"
        type="primary"
        icon="el-icon-thumb"
        @click="submitForm('issueItem', 'readItem', 'researchItem')" //要传多个参数
        >保存</el-button
      >
    </div>

保存的方法

    // 保存
    submitForm(readItem, issueItem, researchItem) { //对应一致的多个参数
      const form1 = new Promise((resolve, reject) => {
        this.$refs[readItem].validate((valid) => {
          if (valid) resolve();
        });
      });
      const form2 = new Promise((resolve, reject) => {
        this.$refs[issueItem].validate((valid) => {
          if (valid) resolve();
        });
      });
      const form3 = new Promise((resolve, reject) => {
        this.$refs[researchItem].validate((valid) => {
          if (valid) resolve();
        });
      });
      Promise.all([form1, form2, form3]).then(() => {
       //连接口1
       //连接口2
       //连接口3
      });
    },

添加、删除和el-form-item每一项对应的方法如上