封装后的表单组件在v-for循环中进行表单校验

1、封装组件 workflowPropertiesForm.vue

    <template>
  <div class="content">
    <el-form :model="dataForm" ref="dataFormRef">
      <template v-for="item in formConfig" :key="item.id">
        <el-form-item prop="projectTypeId" v-if="item.id == 'projectTypeId' && item.readable" :rules="{ required: item.required, message: '请选择项目类型', trigger: 'change' }">
          <el-select v-model="dataForm[`${item.id}`]" @change="handleChange" :disabled="!item.writable" :placeholder="item.name"> <el-option v-for="item in projectTypeOption" :key="item.id" :label="item.typeName" :value="item.id" /> </el-select>
        </el-form-item>
        <el-form-item prop="projectFunds" v-else-if="item.id == 'projectFunds' && item.readable" :rules="{ required: item.required, validator: checkProjectFunds, trigger: 'blur' }">
          <el-input v-model="dataForm[`${item.id}`]" type="number" :placeholder="item.name" :disabled="!item.writable" @change="checkFunds">
            <template #append>
              <div style="width: 90px; text-align: center">{{ bonusRange }}</div>
            </template>
          </el-input>
        </el-form-item>
        <template v-else>
          <el-form-item v-if="item.readable" :prop="item.id" :rules="{ required: item.required, message: `请输入${item.name}`, trigger: 'blur' }">
            <el-input v-model="dataForm[`${item.id}`]" :placeholder="item.name" :disabled="!item.writable"></el-input>
          </el-form-item>
        </template>
      </template>
    </el-form>
  </div>
</template>

<script setup>
import baseService from "@/service/baseService";
import { computed, watch, ref, onMounted, reactive } from "vue";
let $emit = defineEmits(["update:modelValue"]);
let props = defineProps({
  // 双向绑定 修改表单值需要改变list内对应的value
  modelValue: {
    type: Array,
    default: () => {
      return [];
    }
  },
  formProperties: {
    type: Array,
    default: () => {
      return [];
    }
  },
  processDefinitionKey: {
    type: String,
    default: ""
  }
});
let dataForm = ref({});
let dataFormRef = ref(null);
// 校验项目奖金
const checkProjectFunds = (rule, value, callback) => {
  let bonusObj = projectTypeOption.value.find((item) => item.id == dataForm.value.projectTypeId);
  if (!value) {
    return callback(new Error(""));
  } else if (!dataForm.value.projectTypeId) {
    return callback(new Error("请先选择项目类型"));
  } else if (value < bonusObj.bonusAmountMin || value > bonusObj.bonusAmountMax) {
    return callback(new Error(`请输入${bonusObj.bonusAmountMin}~${bonusObj.bonusAmountMax}区间的值`));
  } else {
    callback();
  }
};
watch(
  () => dataForm.value,
  (newForm) => {
    let newConfig = formConfig.value.map((item) => {
      item.value = newForm[item.id];
      return item;
    });
    $emit("update:modelValue", newConfig);
  },
  { deep: true }
);
let formConfig = computed(() => {
  return props.formProperties;
});
let bonusRange = computed(() => {
  let bonusObj = projectTypeOption.value.find((item) => item.id == dataForm.value.projectTypeId);
  return bonusObj ? bonusObj.bonusAmountMin + "~" + bonusObj.bonusAmountMax : "";
});

// 奖金>最低金額
const checkFunds = () => {
  let bonusObj = projectTypeOption.value.find((item) => item.id == dataForm.value.projectTypeId);
  if (bonusObj) {
    dataForm.value.projectFunds = dataForm.value.projectFunds < bonusObj.bonusAmountMin ? bonusObj.bonusAmountMin : dataForm.value.projectFunds > bonusObj.bonusAmountMax ? bonusObj.bonusAmountMax : dataForm.value.projectFunds;
  } else {
  }
  dataForm.value.projectFunds = dataForm.value.projectFunds < 0 ? 0 : dataForm.value.projectFunds;
};
// 项目类型
let projectTypeOption = ref([]);
const getProjectTypeOption = () => {
  baseService.get("/api", { page: 1, limit: 1000 }).then((res) => {
    projectTypeOption.value = res.data.list;
  });
};

onMounted(() => {
  if (props.processDefinitionKey == "development_project_proposal") {
    getProjectTypeOption();
  }
});
</script>
<style scoped lang="less">
.content {
  .el-form {
    .el-form-item {
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>

配置式表单 仅供参考
2、使用组件

    <el-timeline-item v-for="(node, index) in historyNodes" :key="index">
     <!-- 填写表单 -->
     <!-- v-model="node.formProperties"  双向绑定 组件的值发生变化后会重新整合数据改变 -->
          <template v-if="node.formProperties">
            <workflowPropertiesForm class="comment" 
            :ref="(el) => (workflowPropertiesFormRefs[index] = el)" 
            v-model="node.formProperties" 
            :processDefinitionKey="node.processDefinitionKey" :formProperties="node.formProperties" />
          </template>
    </el-timeline-item>
     <el-button v-debounce="() => processingFlow('agree')" type="primary">同意</el-button>

3、提交校验

const workflowFormRef = ref(null);
const workflowPropertiesFormRefs = ref([]);
const processingFlow = async (type) => {
  if (type == "agree") {
    const validatePromises = workflowPropertiesFormRefs.value.map((formComponent) => {
      if (formComponent) {
        return new Promise((resolve) => {
          formComponent.$refs.dataFormRef.validate((valid) => {
            resolve(valid);
          });
        });
      }
    });
    const results = await Promise.all(validatePromises);
    const allValid = results.every((valid) => valid);
    if (!allValid) return;
  }
    workflowFormRef.value.init();
}