a. 自定义验证方法中，直接使用this.form.maxRefund 取不到值
问题描述，在进行退款操作时，验证输入的退款金额不能大于最大可退金额，此时方法maxAmount中， this.form.maxRefund 居然是‘ ’，但是页面明明有渲染出来。确认了，这个字段是有值的。也确定验证规则没有绑定错。
/** 退款 */
private maxAmount = (rule: any, value: string, callback: any) => {
if (value) {
if ((+value) > (+this.form.maxRefund))) {
callback(new Error('退款金额不能大于最大可退金额'))
} else {
callback()
}
} else {
callback()
}
}
/** 验证规则 */
private rules: any = {
amount: [
{ required: true, message: '请输入退款金额', trigger: 'change' },
{ validator: this.maxAmount, trigger: ['change', 'blur'] }
]
}
那么，最后发现是this的问题，最后将上述的方法改写为：
/** 退款 */
private maxAmount = (rule: any, value: string, callback: any) => {
if (value) {
if ((+value) > (+(this.getThis().form.maxRefund)))) {
callback(new Error('退款金额不能大于最大可退金额'))
} else {
callback()
}
} else {
callback()
}
}
private getThis(): any {
return this
}
/** 验证规则 */
private rules: any = {
amount: [
{ required: true, message: '请输入退款金额', trigger: 'change' },
{ validator: this.maxAmount, trigger: ['change', 'blur'] }
]
}
b. 多个数据联动时，验证时且改变联动值产生的问题（不应该算是验证问题）
需求，如下图，输入某个值时，自动计算出其他价格。例如输入折扣，自动计算折后单价，小计价格，商品总计。
我当时是想将表单验证与改变值的事件操作放一起写，但是一波操作猛如虎，写完发现，这些值不停的联动！就是输入a的值，改变了b的值，触发了b 的校验……(所以说不算是是验证中遇到的问题，但既然遇到了，就写下来吧)
<el-form-item
:prop="`goods[${scope.$index}].percent`"
:rules="[
{ validator: ((rule, value, callback) => { validateAllInput(rule, value, callback,`${scope.$index}`, 'percent') }), trigger: ['change', 'blur'] }]"
>
<el-input v-model="scope.row.percent" maxlength="4" class="input-width" size="mini">
<template slot="append">折</template>
</el-input>
</el-form-item>
private validateAllInput = (rule: any, value: string, callback: any, index: number, type: string) => {
if (value) {
if (!validateHaveSpace || !validateNumberFloat) {
// input 输入格式有误
callback()
} else {
// input 输入格式无误
const list = this.getThis().selfForm.goods
const curItem = this.getThis().selfForm.goods[index]
switch (type) {
// 输入的是折扣
case 'percent' : {
console.log('percent')
list[index].percent = +value
list[index].discount = curItem.price * list[index].percent / 10 // 计算折后价
list[index].count = (list[index].discount * curItem.number).toFixed(2) // 该商品小计金额
let temp = 0
list.forEach((item: any) => {
temp = item.count * item.number + temp
})
// 计算订单总额
list.forEach((item: any) => {
item.orderAmount = temp
})
// 更新数据
this.getThis().selfForm.discountTotal = list[0].orderAmount + list[0].freight
this.getThis().selfForm.goods = list
break
}
case 'discount' : {
console.log('discount')
list[index].discount = +value
list[index].percent = ((+value) / curItem.price).toFixed(2) // 计算折扣
list[index].count = (list[index].discount * curItem.number).toFixed(2) // 该商品小计金额
let temp = 0
list.forEach((item: any) => {
temp = item.count * item.number + temp
})
// 计算订单总额
list.forEach((item: any) => {
item.orderAmount = temp
})
// 更新数据
this.getThis().selfForm.discountTotal = list[0].orderAmount + list[0].freight
this.getThis().selfForm.goods = list
break
}
case 'orderAmount' : {
console.log('orderAmount')
list[index].orderAmount = +value
const percent = (+value) / curItem.orderAmount // 计算折扣
// 计算所有商品的折扣，折后价，小计价格
list.forEach((item: any) => {
item.orderAmount = +value
item.percent = percent
item.discount = (item.price * item.percent).toFixed(2)
item.count = (item.discount * item.number).toFixed(2)
})
// 更新数据
this.getThis().selfForm.discountTotal = list[0].orderAmount + list[0].freight
this.getThis().selfForm.goods = list
break
}
case 'freight' : {
console.log('freight')
// 计算所有商品的折扣，折后价，小计价格
list.forEach((item: any) => {
item.freight = +value
})
// 更新数据
this.getThis().selfForm.discountTotal = list[0].orderAmount + list[0].freight
this.getThis().selfForm.goods = list
break
}
default:
break
}
}
} else {
callback(new Error('请输入'))
}
}
private getThis(): any {
return this
}
解决方法，当然是验证和改变值分开啊，校验就单纯做校验的逻辑，就有了下面这种写法：
<el-form-item ref="percent" :prop="`goods[${scope.$index}].percent`" :rules="rules.percent">
<el-input v-model="scope.row.percent" maxlength="4" class="input-width" size="mini" @blur="event => handleInput(event,`${scope.row.percent}`,`${scope.$index}`, 'percent')">
<template slot="append">折</template>
</el-input>
</el-form-item>
c. 多层表单验证，巧用scope.$index
:prop="`list[${scope.$index}].price`"
