动态表单验证

  <div v-for="(item, index) in params.cameraList" :key="index">
        <div class="formOuterBox">
          <div class="formCotantBox">
            <!-- 表单内容 -->
            <el-form
              label-width="100px"
              :model="params.cameraList[index]"
              :ref="'form' + index"
              :rules="rules"
            >
              <el-row>
                <el-col :span="6">
                  <el-form-item label="设备类型:">摄像头</el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="安装时间:">{{
                    item.installationTime
                  }}</el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item>
                    <el-button
                      @click="removeIdx(item, index)"
                      type="djs"
                      class="buttonDelete"
                      >删除</el-button
                    >
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="设备ID:" prop="equipmentId">
                    <el-input v-model="item.equipmentId"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="设备型号:" prop="equipmentModel">
                    <el-input v-model="item.equipmentModel"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="IP地址:" prop="ipAddress">
                    <el-input v-model="item.ipAddress"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item
                    label="端口:"
                    prop="portOne"
                    :rules="rules.portOne"
                  >
                    <el-input v-model.number="item.portOne"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="端口:"
                    prop="portTwo"
                    :rules="rules.portTwo"
                  >
                    <el-input v-model.number="item.portTwo"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="端口:"
                    prop="portThree"
                    :rules="rules.portThree"
                  >
                    <el-input v-model.number="item.portThree"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="端口:"
                    prop="portFour"
                    :rules="rules.portFour"
                  >
                    <el-input v-model.number="item.portFour"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="用户名:" prop="username">
                    <el-input v-model="item.username"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="密码:" prop="password">
                    <el-input v-model="item.password" show-password></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>

   validateAllForms() {
      let allValid = true;
      this.$nextTick(() => {
        for (let i = 0; i < this.params.cameraList.length; i++) {
          const form = this.$refs[`form${i}`][0]; // 注意这里的 [0]，因为 refs 返回的是一个数组
          if (form && form.validate) {
            form.validate((valid) => {
              if (!valid) {
                allValid = false;
              }
            });
          } else {
            console.error(`表单实例 form${i} 未找到或没有 validate 方法`);
            allValid = false;
          }
        }

        if (allValid) {
          create(this.params).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "保存成功!",
              });
              this.$router.push({
                path: "siteManagement",
              });
            }
          });
        }
      });
    },