el-form 表单验证时 使用的是 async-validator 规则可以写在 data 中,如果 form 表单中出现数组,且数组中字段需要验证时可以单独写验证规则
data 中的数据结构
{
// 需要提交到服务器的结构
formData:{
cname:'',
// 嵌套数组,可动态增加
list: [
{sname:'',age:''},
{sname:'',age:''}
]
}
// 主体规则
rules:{
cname: [
{ required: true, message: '请输入班级名称', trigger: 'blur' }
],
}
}
通过索引直接绑定 el-form-item 的prop 属性
<templaye>
<form ref="form" v-model="formData" :rules="rules">
<el-form-item label="班级名称" prop="cname">
<el-input v-model="formData.cname" autocomplete="off"></el-input>
</el-form-item>
<el-table>
<el-table-column>
<template slot-scope="{row,$index}">
<el-form-item :prop="`list.${$index}.sname`" :rules="{required: true, message: '请输入学生名称', trigger: 'blur'}">
<el-input v-model="row.sname"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="{row,$index}">
<el-form-item :prop="`list.${$index}.age`" :rules="{required: true, message: '请输入学生年龄', trigger: 'blur'}">
<el-input v-model="row.age"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</form>
</templaye>
提交前验证
methods:{
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('验证成功!');
} else {
return false;
}
});
}
}