element 表单的input循环生成,并可单个input失去焦点单个验证并保存; (多个表单实例)
<div class="box_item">
<el-form ref="aList" :model="form" :rules="formRules" label-width="210px">
<el-form-item class="itemSty"
v-for="(items, index) in form.aList"
:label="items.name"
:key="items.no"
:prop="'aList.' + index + '.moneyStr'"
:rules="formRules.moneyStr">
<el-input type="text" :maxlength="7" placeholder="0.00-9999" v-model="items.moneyStr">
<template slot="append">元</template>
</el-input>
</el-form-item>
</el-form>
</div>
<div class="box_item">
<el-form ref="bList" :model="form" :rules="formRules" label-width="210px">
<el-form-item class="itemSty"
v-for="(items, index) in form.bList"
:label="items.name"
:key="items.no"
:prop="'bList.' + index + '.moneyStr'"
:rules="formRules.moneyStr">
<el-input type="text" :maxlength="7" placeholder="0.00-9999" v-model="items.moneyStr">
<template slot="append">元</template>
</el-input>
</el-form-item>
</el-form>
</div>
export default {
data() {
let _this = this
let tool = this.tool
let rule_rentMoney = function(rule,value,callback){
if(value.length && !tool.validate.money(value) ){
callback(new Error('请输入整数或小数(小数最多两位)'))
}else if(value > 9999 ){
callback(new Error('金额不能大于 9999 元'))
}else{
_this.edit(rule.field,value) // 验证通过调用保存方法
callback()
}
}
return{
form:{
aList:[],
bList:[]
},
formRules:{
moneyStr:[
{ validator: rule_rentMoney, trigger: 'blur' }
],
}
}
},
methods: {
//清除验证的提示
clearFn(){
let that = this
this.arrValidateKey.map( key =>{
if(that.$refs[key]){
that.$refs[key].resetFields();
}
})
},
}
}