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，

最后可以实现对输入框的校验