在项目中经常会遇到表单的功能,表单的循环校验可能有一点点不同
一层循环中:
<template>
<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
<el-form-item label="班级" prop="class">
<el-input v-model="form.class"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-row v-for="(item,index) in form.formList" :key="index">
<el-col :span="12">
<el-form-item label="姓名" :prop="`formList.${index}.name`" :rules="rules.name">
<el-select v-model="item.name" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="年龄" :prop="`formList.${index}.age`" :rules="rules.age">
<el-input v-model="item.age"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary" @click="submitForm">立即创建</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
class: '',
region: '',
formList: [{
name: '',
age: ''
},
{
name: '',
age: ''
}
]
},
rules: {
class: [{
required: true,
message: '请输入班级名称',
trigger: 'blur'
}],
region: [{
required: true,
message: '请选择活动区域',
trigger: 'change'
}],
name: [{
required: true,
message: '请输入姓名',
trigger: 'blur'
}],
age: [{
required: true,
message: '请输入年龄',
trigger: 'blur'
}]
}
};
},
methods: {
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm() {
this.$refs.form.resetFields();
}
}
}
</script>
两层循环:
<template>
<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
<el-form-item label="班级" prop="class">
<el-input v-model="form.class"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-row v-for="(item,index) in form.formList" :key="index">
<template v-for="(v,i) in item">
<el-col :span="12">
<el-form-item label="姓名" :prop="`formList.${index}.${i}.name`" :rules="rules.name">
<el-select v-model="v.name" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="年龄" :prop="`formList.${index}.${i}.age`" :rules="rules.age">
<el-input v-model="v.age"></el-input>
</el-form-item>
</el-col>
</template>
</el-row>
<el-form-item>
<el-button type="primary" @click="submitForm">立即创建</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
class: '',
region: '',
formList: [
[{
name: '',
age: ''
},
{
name: '',
age: ''
}
],
[{
name: '',
age: ''
},
{
name: '',
age: ''
}
]
]
},
rules: {
class: [{
required: true,
message: '请输入班级名称',
trigger: 'blur'
}],
region: [{
required: true,
message: '请选择活动区域',
trigger: 'change'
}],
name: [{
required: true,
message: '请输入姓名',
trigger: 'blur'
}],
age: [{
required: true,
message: '请输入年龄',
trigger: 'blur'
}]
}
};
},
methods: {
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm() {
this.$refs.form.resetFields();
}
}
}
</script>
重点:
在动态循环中校验表单最重要的就是给el-form-item绑定prop ,按照官方的示例就是循环的对象 + 下标 + 字段 比如我这里的数据是form.formList 那么绑定循环里面的就是
:prop="`formList.${index}.name`" ,理论上有几层循环那么中间就需要些几个下标,
如两层循环:prop="`formList.${index}.${i}.name`"
至于校验规则 则需要写在每个el-form-item上面 ,如:rules="rules.name"