动态循环表单+动态判断表单类型+动态判断表单是否必填方法

页面效果：

接口请求到的数据格式：

        list: [{demandType: "设备辅助功能要求",demandSettingList: [{id: "1907384788664963074",name: "测试表单",fieldType: 0,contentValue: "",vaildStatus: 0, // 0 非必填；1 必填}]},{demandType: "与产品接触部件要求",demandSettingList: [{id: "1907384788648185858",name: "需求背景",fieldType: 0,contentValue: "",vaildStatus: 1}]},]

模版代码：

            <div v-for="(item,index) in list" :key="index"><el-form :inline="true" :model="item" :ref="'form' + index" label-width="100px"><div class="demand-type">{{ item.demandType }}</div><div v-for="(itm,index2) in item.demandSettingList" :key="index2"><!-- fieldType: 0---文本类型表单 --><el-form-item :label="itm.name" v-if="itm.fieldType === 0" :prop="'demandSettingList.' + index2 + '.contentValue'" :rules="{ required: itm.vaildStatus === 1, message: itm.name + '不能为空', trigger: 'blur' }"><el-input v-model="itm.contentValue" placeholder="请输入" style="width:200px"></el-input></el-form-item><!-- fieldType: 1---数字类型表单 --><el-form-item :label="itm.name" v-if="itm.fieldType === 1" :prop="'demandSettingList.' + index2 + '.contentValue'" :rules="{ required: itm.vaildStatus === 1 }"><el-input-number v-model="itm.contentValue" :min="1" style="width:200px"></el-input-number></el-form-item><!-- fieldType: 2---日期类型表单 --><el-form-item :label="itm.name" v-if="itm.fieldType === 2" :prop="'demandSettingList.' + index2 + '.contentValue'" :rules="{ required: itm.vaildStatus === 1 }"><el-date-picker v-model="itm.contentValue" type="date" placeholder="请选择日期"format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width:200px"></el-date-picker></el-form-item><!-- fieldType: 3---时间类型表单 --><el-form-item :label="itm.name" v-if="itm.fieldType === 3" :prop="'demandSettingList.' + index2 + '.contentValue'" :rules="{ required: itm.vaildStatus === 1 }"><el-date-picker v-model="itm.contentValue" type="datetime" style="width:200px"format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间"></el-date-picker></el-form-item><!-- fieldType: 4---人员单选类型表单 --><el-form-item :label="itm.name" v-if="itm.fieldType === 4" :prop="'demandSettingList.' + index2 + '.contentValue'" :rules="{ required: itm.vaildStatus === 1 }"><el-select v-model="itm.contentValue" filterable remote placeholder="请选择" style="width:200px"@focus="userFoucs" :remote-method="remoteMethod" :loading="loadingSearch"><el-option v-for="it in searchUserList" :key="it.id" :label="`${it.realName}(${it.account})`":value="it.id"></el-option></el-select></el-form-item><!-- fieldType: 5---人员多选类型表单 --><el-form-item :label="itm.name" v-if="itm.fieldType === 5" :prop="'demandSettingList.' + index2 + '.contentValue'" :rules="{ required: itm.vaildStatus === 1 }"><el-select v-model="itm.contentValue" filterable remote placeholder="请选择" style="width:200px"multiple collapse-tags @focus="userFoucs" :remote-method="remoteMethod" :loading="loadingSearch"><el-option v-for="it in searchUserList" :key="it.id" :label="`${it.realName}(${it.account})`":value="it.id"></el-option></el-select></el-form-item></div></el-form></div><div style="text-align: center;display: block;" v-if="rightFormList.length != 0"><el-button type="primary" @click="submitForm()" :loading="loadingBtn">确定</el-button></div>

提交时的校验方法：

        submitForm() {this.$nextTick(() => {const formRefs = Object.values(this.$refs).flat().filter(ref => ref && typeof ref.validate === "function"); // 过滤非 el-form 组件if (formRefs.length === 0) {console.warn("未找到任何 el-form 组件，请检查 v-for 绑定的 ref 是否正确");return;}Promise.all(formRefs.map(form => form.validate())).then(() => {this.loadingBtn = false;let list = [];this.rightFormList.forEach(item => {item.demandSettingList.forEach(itm => {list.push(itm);});});return api.queryProjectDemandSettingUpdate(list, this.uuId);}).then(() => {this.$message.success('操作成功！');this.getRightList();this.getUuid();}).catch(() => {this.loadingBtn = false;this.$message.warning("请完整填写必填信息！");});});},

📌 总结

📢 代码执行流程

1. 使用 this.$nextTick() 确保 this.$refs 获取到最新的 el-form 组件。

2. 收集 this.$refs 里的 el-form 组件，并确保 .validate() 方法存在。

3. 用 Promise.all() 让所有表单执行 .validate()：

   • 如果全部校验通过，调用 API 提交数据。

   • 如果有未填写的必填项，则提示用户补充信息。

🛠 可能的问题

❌ validate is not a function

原因：

• this.$refs["form" + index] 可能是 数组 或 undefined。

• 解决方案：

  • 使用 this.$refs["form" + index][0] 或者 遍历 this.$refs 过滤非 el-form 组件（即代码里 .filter(ref => typeof ref.validate === "function") 部分）。

❌ 提交后还是提示“请完整填写必填信息”

可能原因：

• el-form-item 的 :prop 绑定错误，导致 validate() 无法正确校验。

• v-model 绑定的 contentValue 可能是 undefined，导致 required 校验失败。

检查方案：

1. 确保 el-form-item 的 :prop 写对：

   <el-form-item :prop="'demandSettingList.' + index2 + '.contentValue'"

2. 确保 itm.contentValue 初始值是 "" 或 null（不要是 undefined）。

至此完成！！！

测试有效！！！感谢支持！！！