好久没更新了,最近这阵子被拉去写后端代码了,现在才终于重新碰前端的东西,结果就手生了,之前会写的现在卡了半天,最后还是忍不住去看了我之前的代码咋写的……记录一下防止下次又忘记
效果如下:
不使用表格总计行,而是在表格上面单写一个input,实时计算数据。
解法:
computed计算属性
amountTotal(){
let sum = 0;
if(this.gdsTableList){
this.gdsTableList.forEach((item)=>{
sum += Number(item.amount) || Number(0)
})
}
return sum
},
如果想保留小数什么的,也可以,加上相应的限制就好了,如下:
computed:{
taxTotalFee(){
let sum = 0;
if(this.gdsTableList){
this.gdsTableList.forEach((item)=>{
sum += Number(item.taxFee) || Number(0)
})
sum = parseFloat(sum).toFixed(5)
}
return sum
}
},
至于如何让输入后就立刻转成保留几位小数,如下:
使用@blur
<el-table-column sortable label="abc" width="140px" align="center" prop="abc" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-input v-model="scope.row.abc" @blur="onBlurChange5abc(scope.row)"></el-input>
</template>
</el-table-column>
onBlurChange5abc(row){
row.abc = parseFloat(row.abc).toFixed(5);
if(isNaN(row.abc)){
row.abc = null
}
},
——————
这样就不用去纠结小数相加的问题了,我就是钻死胡同了跟小数相加死磕了好久