頁面效果：

接口請求到的數據格式：

        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）。

至此完成！！！

測試有效！！！感謝支持！！！