VUE使用el-ui关于el-table添加输入框自定义校验（VUE专题二）

如图所示，在table表中，输入框填入后提交，校验输入框

 

 

 

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，

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