动态循环表单+动态判断表单类型+动态判断表单是否必填方法
页面效果：
接口请求到的数据格式：
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("请完整填写必填信息！");
});
});
},📌 总结
📢 代码执行流程
-
使用
this.$nextTick()确保this.$refs获取到最新的el-form组件。 -
收集
this.$refs里的el-form组件，并确保.validate()方法存在。 -
用
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校验失败。
检查方案：
-
确保
el-form-item的:prop写对：<el-form-item :prop="'demandSettingList.' + index2 + '.contentValue'" -
确保
itm.contentValue初始值是""或null（不要是undefined）。
至此完成！！！
测试有效！！！感谢支持！！！