el-table 合计行的一直计算的问题。

前端只有打印日志之后,才发现有计算在反复执行,导致浏览器崩溃。并不是每一列都是这个问题,当然输入不同值后,不知为何会触发如此多次。
.1
在开发环境,他会触发几百次getSummaries,生产环境直接崩溃
1

合计行的代码如下,至于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
}

问题的差异在这里,因为这个合计是按照列来计算的,所以跟我们想的不一样。不能重复指定列计算,否则会陷入无限循环
1

  • 8
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

warrah

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值