element 表单验证 单个input输入框(脱离表单的),添加校验

项目需求是要输入的面额不能大于原来的价格,由于每次循环导致取到最后一条数据的值来校验的,很显然是不行的
在这里插入图片描述

在网上查了很多方法,也没有合适的,于是就用到了官方提供的Form-Item的属性 error
在这里插入图片描述
注:用error的话,就不需要为el-form-item添加proprules了,直接在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版权协议,转载请附上原文出处链接和本声明。