业务逻辑在table里面 , 可以校验到每一行的数量的
html 如下
<el-table-column
align="center"
prop="address"
label="数量"
width="100"
>
<template slot-scope="scope">
<el-input
v-model="scope.row.quantity"
placeholder="请输入"
style="width: 80px"
maxlength="4"
@input="
(e) => {
NumCosts(e, scope.$index);
}
"
></el-input>
</template>
js如下
/* 数量校验 + 计算金额*/
NumCosts(e, ind) {
console.log(e);
let Tom = [];
if (e.length > 6) e = e.slice(0, 8);
for (let index = 0; index < e.length; index++) {
let R = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
if (R.includes(e[index])) {
Tom.push(e[index]);
}
}
this.expenditures.expenseDetailedParams[ind].quantity = Tom.join("");
//计算金额
const { unitPrice, quantity } =
this.expenditures.expenseDetailedParams[ind];
if (unitPrice && quantity) {
this.expenditures.expenseDetailedParams[ind].expenseAmount = (
Number(unitPrice) * Number(quantity)
).toFixed(2);
} else {
this.expenditures.expenseDetailedParams[ind].expenseAmount = 0;
}
this.totalCosts();
},