vue针对ele的form组件校验

场景1：form表单下的table指定列校验非空

form表单包含了 el-table列表的对应列校验，那么将 e-table-column指定列下 ，增加 el-formo-item校验规则，如下：

<el-form-item label-width="0" :prop="'specGoodsPrices.' + scope.$index + '.storeCount'" :rules="[{required: true, message: '必填项不能为空'}]">
	<el-input type="number"  min="0" size="small" v-model="scope.row.storeCount" ></el-input>
</el-form-item>

1、el-form-item的

:prop校验属性的设置，specGoodsPrices是this.form.specGoodsPrices表格list数据，

scope.$index 区分 表格所属第几行，标识此行此列是form表单的唯一校验项

storeCount:是table的列字段

 

场景2：自定义校验table指定列，并且触发校验相关联的其它table列

 

<el-form-item label-width="0" :prop="'specGoodsPrices.' + scope.$index + '.price'" 
	:rules="[{validator: ((rule, value, callback,item,rowIndex) =>validateSkuMarketPrice(rule, value, callback,scope.row,scope.$index) ), trigger: 'blur' }]"  > 
	<el-input ref="market-price-fItem" :min=0 size="small" title="需大于0且保留两位小数的金额格式" style="max-width:160px;" v-model="scope.row.price" ></el-input>				
</el-form-item>

validateSkuMarketPrice(rule,value,callback,row,rowIndex){
	if(value == ""){
		callback(new Error('必填项不能为空'));
	}else{
					
		//负数校验
		let reg2 = /^-(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
		if(reg2.test(value))
		{
			callback(new Error("金额需为非负数"));
		}
		let reg = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
		if(!reg.test(value)){
			callback(new Error("金额格式不正确"));
		}
		//校验门店进货价、零售价 做价格比较， 规则： 零售价>=门店进货价 
		if(row.shopPrice && !reg2.test(row.shopPrice) && row.price<row.shopPrice ){
			callback(new Error('不能低于门店价'));
		}
		else{			                        
          
  this.$refs["goodsForm"].validateField('specGoodsPrices.'+rowIndex+'.shopPrice');
			 callback();
		 }
	}
},

其中 this.$refs["goodsForm"].validateField('specGoodsPrices.'+rowIndex+'.shopPrice'); 就是触发el-table门店价格的校验，同时显示新的校验结果信息

说明：goodsForm是el-form的 ref定义，如下

<el-form ref="goodsForm" :model="form" label-width="150px" size="small">
</el-form>