在element-ui中使用循环form表单实现的页面，如何进行提交前的数据校验？
可以使用this.$refs.formName.validate(valid => {})来对循环生成的form表单进行验证，示例如下：
<template>
<div>
<el-form
v-for="(item, index) in formItems"
:key="index"
:ref="'form' + index"
:model="item"
:rules="rules"
>
<el-form-item label="活动名称" prop="name">
<el-input v-model="item.name"></el-input>
</el-form-item>
<!-- 其他表单项 -->
</el-form>
<el-button @click="validateForms">验证表单</el-button>
</div>
</template>
<script>
export default {
data() {
return {
formItems: [
// 初始化表单数据
{ name: "11" },
{ name: "22" },
{ name: "33" },
],
rules: {
name: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
},
};
},
methods: {
validateForms() {
let valid = true;
this.formItems.forEach((item, index) => {
const formName = "form" + index;
this.$refs[formName][0].validate((isValid) => {
valid = valid && isValid;
});
});
if (valid) {
console.log("所有表单验证通过");
} else {
console.log("有表单验证未通过");
}
},
},
};
</script>
image.png
image.png
