项目需求是要输入的面额不能大于原来的价格,由于每次循环导致取到最后一条数据的值来校验的,很显然是不行的
在网上查了很多方法,也没有合适的,于是就用到了官方提供的Form-Item
的属性 error
注:用error
的话,就不需要为el-form-item
添加prop
和rules
了,直接在el-form-item
标签上添加:error="scope.row.error"
即可
代码:
<el-table-column label="优惠面额(元)">
<template slot-scope="scope">
<el-form-item :error="scope.row.error">
<el-input v-model.number="scope.row.parValue" @input="tableParValueChange(scope.row)" />
</el-form-item>
</template>
</el-table-column>
// 表格中优惠面额校验
tableParValueChange(row) {
if (row.parValue === '') {
row.error = '不能为空'
} else if (row.parValue < 1) {
row.error = '优惠面额最小为1'
} else if (row.parValue > row.salePrice) {
row.error = '不能大于' + row.salePrice
} else {
row.error = ''
}
},
最终效果: