vue.js element el-table 里 el-input 数据校验,比较两列
场景,换购价不能超过售价。网上搜到的一般都是用form对内容进行简单校验,比如不为空,长度等,不能进行数据比较之类的操作。<el-table :data="curHomePageExchangeGoodsList"stripe:row-style="{height:0+'px'}":cell-style="{padding...
·
场景,换购价不能超过售价。网上搜到的一般都是用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);
更多推荐
已为社区贡献6条内容
所有评论(0)