第一步;页面 el-input循环
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<div v-for="(item,index) in ruleForm.mailSet" :key="index">
<el-form-item >
<el-input v-model.trim="ruleForm.mailSet[index]" ></el-input>
<img src="add" @click="addItem">
<img src="del" @click="deleteItem">
</el-form-item>
</div>
</el-form>
<template>
<script>
export default{
data(){
return {
ruleForm:{
mailSet:[],
}
}
},
}
</script>
第二步:添加按钮(增加input框 or 减少input框)
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<div v-for="(item,index) in ruleForm.mailSet" :key="index">
<el-form-item >
<el-input v-model.trim="ruleForm.mailSet[index]" ></el-input>
<img src="add" @click="addItem">
<img src="del" @click="deleteItem">
</el-form-item>
</div>
</el-form>
<template>
<script>
export default{
data(){
return {
ruleForm:{
mailSet:[],
}
}
},
methods:{
//添加一个input框
addItem(){
this.ruleForm.mailSet.splice(index+1,0,"")
},
//删除一个input框
deleteItem(){
this.ruleForm.mailSet.splice(index,1)
},
},
}
</script>
第三步:对input 框进行校验(注意:自定义校验 callback 必须被调用。)
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<div v-for="(item,index) in ruleForm.mailSet" :key="index">
<el-form-item :prop="'mailSet.'+index" :rules="rules.mailSetRules">
<el-input v-model.trim="ruleForm.mailSet[index]" ></el-input>
<img src="add" @click="addItem">
<img src="del" @click="deleteItem">
</el-form-item>
</div>
</el-form>
<template>
<script>
export default{
data(){
return {
ruleForm:{
mailSet:[],
},
rules:{
mailSetRules:[{ message: '请填写电子邮箱', trigger: 'blur'},
{ trigger: ["blur", "change"],
validator:(rule, value, callback) => {
let set1=new Set(this.ruleForm.mailSet);
var reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
if(!reg.test(value) && this.ruleForm.isMail==2){
this.mailSetRule=false;
return callback("邮箱格式不正确");
}
if(this.ruleForm.mailSet.length!=set1.size){
this.mailSetRule=false;
return callback("邮箱不可重复");
}
callback();
}
}
],
},
}
},
}
</script>
第四步:如果多个页面共用一张表的话,消除校验回显(添加一个v-if判断条件,必须加上key值)
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<div v-for="(item,index) in ruleForm.mailSet" :key="index">
<el-form-item :prop="'mailSet.'+index" :rules="rules.mailSetRules" v-if="" >
<el-input v-model.trim="ruleForm.mailSet[index]" ></el-input>
<img src="add" @click="addItem">
<img src="del" @click="deleteItem">
</el-form-item>
<el-form-item :prop="'mailSet.'+index" :rules="rules.mailSetRules" v-else=""
key="1">
<el-input v-model.trim="ruleForm.mailSet[index]" ></el-input>
<img src="add" @click="addItem">
<img src="del" @click="deleteItem">
</el-form-item>
</div>
</el-form>
<template>
效果图