<el-form-item >
<el-button @click="addbankLink">新增绑定银行</el-button>
</el-form-item>
<el-form-item
v-for="(domain, index) in myForm.bankNoDtos"
label="绑定银行"
:key="domain.key"
:prop="'bankNoDtos.' + index + '.bankName'"
:rules="[{ required: true, validator: checkNumber, trigger: 'change' }]"
>
<el-select v-model="domain.bankName" placeholder="请选择" style="width:30%">
<el-option
v-for="item in bankOptions"
:key="item.label"
:label="item.label"
:value="item.label">
</el-option>
</el-select>
<el-input v-model="domain.bankCardNo" placeholder="银行卡号" minlength="16" maxlength="19" clearable style="width:50%"></el-input>
<el-button @click.prevent="removeBankLink(domain)">删除</el-button>
</el-form-item>
//表单form
myForm:{
userName:'',
documentCd:'',
bankCardNo:'',
apAccountType:'',
bankNoDtos:[ //动态增减部分
{
bankName:'',
bankCardNo:''
}
]
},
//动态添加银行和银行卡的下选框
addbankLink(){
this.myForm.bankNoDtos.push({
bankCardNo: '',
key: Date.now()
})
},
//动态删除银行和银行卡的下选框
removeBankLink(item) {
var index = this.myForm.bankNoDtos.indexOf(item)
if (index !== 0) {
this.myForm.bankNoDtos.splice(index, 1)
}
},
//表单验证
checkNumber(rule, value, callback){
let newArr=rule.field.split('.')
let currentIndex=newArr[1];
let currentProp=newArr[2];
if(value===''){
return callback(new Error('请选择绑定银行'));
}
if(this.myForm.bankNoDtos[currentIndex]['bankCardNo']===''){
return callback(new Error('请输入银行卡号'));
} else {
callback();
}
}
网友评论