vue.js element el-table 裏 el-input 數據校驗，比較兩列

場景，換購價不能超過售價。網上搜到的一般都是用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);