场景,换购价不能超过售价。网上搜到的一般都是用form对内容进行简单校验,比如不为空,长度等,不能进行数据比较之类的操作。
在这里插入图片描述

<el-table :data="curHomePageExchangeGoodsList"
          stripe
          :row-style="{height:0+'px'}"
          :cell-style="{padding:0+'px'}"
          ref="homePageShopTable">
          <el-table-column prop="totalAmount" label="换购价" width="150">
    <template slot-scope="scope">
        <el-input v-model="scope.row.totalAmount"
                  @blur="onExchangeChange(scope.$index)"
                  :data-price="scope.row.price"
                  type="number"
                  @input="change(scope.$index)"
        >
        </el-input>
    </template>
</el-table-column>
</el-table>

其中

@blur="onExchangeChange(scope.$index)"

是失焦后进行数据检查,参数为行数

vue.js代码,通过index获取到售价,换购价,然后进行比较,如果换购价大于售价,则提示,并把换购价初始化为售价。

onExchangeChange: function (index) {
    console.log("exchange price change");
    let tmpObj = this.tableData[index];

    let salePrice = parseFloat(tmpObj.price);
    let totalAmount = parseFloat(tmpObj.totalAmount);

    if (totalAmount > salePrice) {
        layer.msg('换购价不能大于售价', {time: 1000})
        this.tableData[index].totalAmount = salePrice;
        this.$set(this.curHomePageExchangeGoodsList, index, tmpObj);
    }
},

其中这句代码是对表进行行更新, homePageShopTable 是表格的ref

    this.$set(this.curHomePageExchangeGoodsList, index, tmpObj);
Logo

前往低代码交流专区

更多推荐