前端只有打印日志之后,才发现有计算在反复执行,导致浏览器崩溃。并不是每一列都是这个问题,当然输入不同值后,不知为何会触发如此多次。
.
在开发环境,他会触发几百次getSummaries
,生产环境直接崩溃
合计行的代码如下,至于el-table
合计行的配置参考element-plus
官网中说明,这里不赘述。
// 表格合计行
const getSummaries = (param) => {
const {columns,data} = param
const sums: string[] = []
const calColNames = ['je','sl','zke','se','jshj']
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计'
return
} else if (calColNames.includes(column.property)){
const values = data.map((item) => Number(item[column.property]))
if (values && values.length>0){
if (!values.every((value) => Number.isNaN(value))) {
sums[index] = `${values.reduce((prev, curr) => {
const value = Number(curr)
if (!Number.isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)}`
// 金额
if (column.property == 'je'){
console.log('计算总金额')
orderForm.value.totalAmount = Number(sums[index])
orderForm.value.totalJshj = orderForm.value.totalAmount
orderForm.value.needAmount= orderForm.value.totalAmount
// orderForm.value.needBalance = orderForm.value.needAmount - Number(orderForm.value.realAmount)
} else if (column.property == 'zke'){
console.log('计算总折扣额')
orderForm.value.totalZke = Number(sums[index])
}
if (openTax()){
if (column.property == 'se'){
console.log('计算税额')
orderForm.value.totalSe = Number(sums[index])
} else if (column.property == 'jshj'){
console.log('计算价税合计')
// 开启税率,采用价税合计计算优惠后金额
orderForm.value.totalJshj = Number(sums[index])
orderForm.value.needAmount = orderForm.value.totalJshj
// orderForm.value.needBalance = orderForm.value.needAmount - Number(orderForm.value.realAmount)
}
}
sums[index] = proxy.$tool.moneyFormat(sums[index])
} else {
sums[index] = ''
}
} else{
console.log('其他计算中')
}
} else{
sums[index] = ''
return
}
})
return sums
}
另外一个没有的计算代码,如下,所不同的区别在于表单的计算,由calFinalAmount
方法来实现
const totalAmount = ref(0)
const getSummaries = (param) => {
const {columns,data} = param
const sums: string[] = []
const calColNames = ['je','sl','zke','se','jshj']
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计'
return
} else if (calColNames.includes(column.property)){
const values = data.map((item) => Number(item[column.property]))
if (values && values.length>0){
if (!values.every((value) => Number.isNaN(value))) {
sums[index] = `${values.reduce((prev, curr) => {
const value = Number(curr)
if (!Number.isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)}`
if (openTax()){
if (column.property == 'jshj'){
console.log('计算价税合计')
// 开启税率,采用价税合计计算优惠后金额
totalAmount.value = Number(sums[index])
calFinalAmount();
}
} else{
if (column.property == 'je'){
console.log('计算金额')
// 计算优惠后金额
totalAmount.value = Number(sums[index])
calFinalAmount();
}
}
sums[index] = proxy.$tool.moneyFormat(sums[index])
} else {
sums[index] = ''
}
} else{
console.log('其他计算中')
totalAmount.value = 0
calFinalAmount();
}
} else{
sums[index] = ''
return
}
})
return sums
}
问题的差异在这里,因为这个合计是按照列来计算的,所以跟我们想的不一样。不能重复指定列计算,否则会陷入无限循环