背景:官网上实现的方式,有2种
一种是外层只有一个el-form,对象里面包括数组
另一种只有一个el-form,且是一个对象,但目前都不满足需求。
现在看第三种实现方式:
el-form是循环出来的,model的值是循环的对象.
1. 数据结构如下
2. ref是循环的变量
model的值是循环的对象. 同时定义rules
3. 定义校验规则。
rules: {
bankCardNumber: [
{ required: true, message: "请输入银行卡号" },
{ pattern: /^[0-9]*$/, message: "请输入数字" },
],
}, // 表单验证规则
});
4. 定义ref变量为数组
const myFormRefs = ref([]);
5. 提交时校验
这里的myFormRefs.value[index]中的index, 就是v-for循环的formData.accountList的index, 作为参数传进去。