数组中同组的数据，计算总额，并在同组的末尾添加总额项

Atigger

2023 年 10 月 30 日

481 次浏览

关闭评论

1931字数

前端

源数据是这种，数组对象

我们想要的页面展示是这样

这就需要把原数组处理一下，把zmfl相同的给分成一组，并在这组末尾添加一项，这一项里面需要包含这一组的金额总数

我用原生方法尝试了下

定义一个空对象，把xmfl相同的都塞到它这个属性对应的数组里面
遍历对象，进行金额的累加计算，并在组末尾新建一项，把计算的金额放进去
最后我们只需要这个对象的值组成的数组，通过数组的flag把数组扁平化处理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const arr = [
            { xmfl: '西药', name: '1', money: 20 },
            { xmfl: '西药', name: '2', money: 30 },
            { xmfl: '西药', name: '3', money: 10 },
            { xmfl: '中药', name: '1', money: 50 },
            { xmfl: '中药', name: '2', money: 60 },
            { xmfl: '中程药', name: '1', money: 70 },
            { xmfl: '中西药', name: '1', money: 90 },
        ]
        let obj = {}
        var index = 0
        arr.forEach((item, i) => {
            if (arr[i]?.xmfl !== arr[i + 1]?.xmfl) {
                obj[item.xmfl] = arr.slice(index, i + 1)
                index = i + 1
            }
        })
        for (let key in obj) {
            // 算金额
            let count = obj[key].reduce((sum, item, index) => {
                return sum += item.money
            }, 0)
            // 算需要合并的行数
            let rowSpans = obj[key].length
            obj[key].forEach((item, i) => {
                if (i === 0) {
                    item.rowSpan = rowSpans
                } else {
                    item.rowSpan = 0
                }
            })
            obj[key].push({ ze: count, rowSpan: 1 })
        }
        let resList = Object.values(obj).flat(Infinity)
        console.log(resList)
    </script>
</body>

</html>

效果如下