a. 自定義驗證方法中，直接使用this.form.maxRefund 取不到值
問題描述，在進行退款操作時，驗證輸入的退款金額不能大于最大可退金額，此時方法maxAmount中，?this.form.maxRefund 居然是‘ ’，但是頁面明明有渲染出來。確認了，這個字段是有值的。也確定驗證規(guī)則沒有綁定錯。
/** 退款?*/
private?maxAmount?=?(rule:?any,?value:?string,?callback:?any)?=>?{
if?(value)?{
??????if?((+value)?>?(+this.form.maxRefund)))?{
????????callback(new?Error('退款金額不能大于最大可退金額'))
??????}?else?{
????????callback()
??????}
????}?else?{
??????callback()
????}
??}
/**?驗證規(guī)則?*/
private?rules:?any?=?{
? ? amount:?[
? ?????{?required:?true,?message:?'請輸入退款金額',?trigger:?'change'?},
? ?????{?validator:?this.maxAmount,?trigger:?['change',?'blur']?}
? ? ]
}
那么，最后發(fā)現(xiàn)是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
??}
/**?驗證規(guī)則?*/
private?rules:?any?=?{
? ? amount:?[
? ?????{?required:?true,?message:?'請輸入退款金額',?trigger:?'change'?},
????????{?validator:?this.maxAmount,?trigger:?['change',?'blur']?}
? ? ]
}
b. 多個數(shù)據(jù)聯(lián)動時，驗證時且改變聯(lián)動值產生的問題（不應該算是驗證問題）
需求，如下圖，輸入某個值時，自動計算出其他價格。例如輸入折扣，自動計算折后單價，小計價格，商品總計。
我當時是想將表單驗證與改變值的事件操作放一起寫，但是一波操作猛如虎，寫完發(fā)現(xiàn)，這些值不停的聯(lián)動！就是輸入a的值，改變了b的值，觸發(fā)了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
? ? ? ? ? ? })
? ? ? ? ? ? // 更新數(shù)據(jù)
? ? ? ? ? ? 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
? ? ? ? ? ? })
? ? ? ? ? ? // 更新數(shù)據(jù)
? ? ? ? ? ? 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)
? ? ? ? ? ? })
? ? ? ? ? ? // 更新數(shù)據(jù)
? ? ? ? ? ? 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
? ? ? ? ? ? })
? ? ? ? ? ? // 更新數(shù)據(jù)
? ? ? ? ? ? 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`"
