项目需求是要输入的面额不能大于原来的价格,由于每次循环导致取到最后一条数据的值来校验的,很显然是不行的
在网上查了很多方法,也没有合适的,于是就用到了官方提供的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 = ''
}
},
最终效果:
版权声明:本文为qq_45846359原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。