VUE使用el-ui關於el-table添加輸入框自定義校驗（VUE專欄二）

如圖所示，在table表中，輸入框填入后提交，校驗輸入框

 

 

 

<template>

<el-form :model="request" ref="request"  :rules="rules" class="demo-ruleForm">
   <el-table :data="request.prodlist" style="width: 100%;margin-top:10px" border>
         <el-table-column label="序號" type="index"></el-table-column>
　　　　　 <el-table-column label="退貨數量" width="160px" >

                                        <template slot-scope="item">
                                            <div style="padding: 16px 0px">
                                            <el-form-item label="" label-width="0"
                                                          :prop="'prodlist.'+item.$index+'.reqQuantity'"
                                                          style="margin-bottom:0"
                                                          :rules="{validator: checkQuantity, prodObj: item.row, trigger: 'blur'}">

                                                <el-input size="small" v-model.trim="item.row.reqQuantity" placeholder="請輸退供數量"
                                                          type="number" @keyup.native='keyupEvent($event,input)'>
                                                    <template slot="append">
                                                        <span>{{item.row.unit}}</span>
                                                    </template>
                                                </el-input>
                                            </el-form-item>
                                            </div>
                                        </template>
             </el-table-column>
　　</el-table>
 </el-form>

</template>

export default {

    data() {
        return {
            isCommit: false,
            request: {
                adminShopId: '',
                adminShopName: '',
                remark: '',
                storeAddress: '',
                jsonStr: '',
                prodlist:[]
            },
            data: [],
       
        }
    },

created() {
  
},

methods: {
　　

          checkQuantity(rule, value, callback) {
                if (value === '' || value === null) { callback(new Error('請輸入數量')); } else if (!/^([1-9]\d*)$/.test(Number(value))) { callback(new Error('請輸入正確數量')); } else if (value > rule.prodObj.canInventory) { callback(new Error('退貨數量不能大於可用數量')); } else { callback(); } },

//計算
 keyupEvent(e,input){
     //計算退貨數量
     var prodList = this.data;
     var num=0;
     prodList.forEach(prod=>{
         num=this.addNumberFun(num,parseFloat(prod.reqQuantity || 0));
     } )
     this.totalNumber=num;
},
//加法
addNumberFun(num1, num2) {
    var r1, r2, m, n;
    try {
        r1 = num1.toString().split(".")[1].length
    } catch (e) {
        r1 = 0
    }
    try {
        r2 = num2.toString().split(".")[1].length
    } catch (e) {
        r2 = 0
    }
    m = Math.pow(10, Math.max(r1, r2))
    n = (r1 >= r2) ? r1 : r2;
    return ((num1 * m + num2 * m) / m).toFixed(n);
}

}

}

此處的輸入框檢驗，先是直接用定義好的data上取值，發現拿不到，后來試了多次，發現要從綁定的request上取值，於是改為在request上定義prodList,然后將獲得的data賦值給prodList，

最后可以實現對輸入框的校驗