1、如图:

elementUI技巧:在 el-table中校验el-input输入框_javascript

2、表格代码

说明:列表必须在dataForm中定义,el-input必须使用el-form-item包裹

<el-table :data="dataForm.itemList" border size="mini" class="item-table" height="250"
@selection-change="selectionChangeHandle" ref="itemTable"
:header-cell-style="{ background: '#fcfcfc', color: '#606266', height:'36px'}">
<el-table-column type="selection" header-align="center" align="center" width="50">
</el-table-column>
<el-table-column type="index" header-align="center" align="center" width="40" label="#">
</el-table-column>
<el-table-column prop="productCode" header-align="center" width="150" align="center" label="药品编码">
<template slot-scope="scope">
<el-form-item :prop="'itemList.'+scope.$index+'.productCode'" :rules="rules.productCode">
<el-input size="mini" v-model="scope.row.productCode" disabled class="product-code-input"> </el-input>
</el-form-item>

</template>
</el-table-column>
</el-table>

3、js验证

data(){
var checkValue = (rule, value, callback) => {
// 只能输入数字(正数和负数,小数整数)
let reg =/^([-+]?[0-9]+[\d]*(.[0-9]{1,})?)$/
let res = reg.test(value);
if(res){
callback();
}else{
callback(new Error(""))
}
}
return {
dataForm:{
itemList:[]
},
rules:{
productCode:[{ required: true,message :"产品编码不能为空",validator:checkValue ,trigger:
"blur"}]
},
}
}

4、提交表单前验证

this.$refs.dataForm.validate(async(valid) => {
// 校验通过
if(valid){

}

}