js 数组中 id相同的数据, 统计某个属性的总和,并新增字段记录；2 时间相同的, 合并统计列

最新推荐文章于 2024-08-17 21:05:24 发布

qq_41737172

最新推荐文章于 2024-08-17 21:05:24 发布

阅读量151

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_41737172/article/details/132448735

版权

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod">
            <el-table-column prop="time" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="nameY" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="way" label="方向" width="180">
            </el-table-column>
            <el-table-column prop="red" label="单个1">
            </el-table-column>
            <el-table-column prop="yellow" label="单个2">
            </el-table-column>
            <el-table-column prop="sumR" label="统计1">
            </el-table-column>
            <el-table-column prop="sumY" label="统计2">
            </el-table-column>
        </el-table>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                visible: false,
                tableData: []
            }
        },
        created() {
            this.cc()
        },
        methods: {
            cc() {

                var tableData = [
                    { date: '2020-08-10', monitorPointName: 'K01(出北)', red: 1, yellow: 0 },
                    { date: '2020-08-10', monitorPointName: 'K01(出南)', red: 3, yellow: 5 },
                    { date: '2020-08-10', monitorPointName: 'K02(出东)', red: 5, yellow: 0 },
                    { date: '2020-08-11', monitorPointName: 'K03(出北)', red: 2, yellow: 3 },
                    { date: '2020-08-11', monitorPointName: 'K03(出南)', red: 1, yellow: 5 },
                ]


                const groupedData = {};
                for (const entry of tableData) {
                    const date = entry.date;
                    const red = entry.red;
                    const yellow = entry.yellow;


                    if (!groupedData[date]) {
                        groupedData[date] = { sumR: 0, sumY: 0, count: 0, entries: [] };
                    }

                    groupedData[date].sumR += red;
                    groupedData[date].sumY += yellow;
                    groupedData[date].count++;
                    groupedData[date].entries.push(entry);
                }

                const newData = [];
                for (const date in groupedData) {
                    const { sumR, sumY, count, entries } = groupedData[date];
                    for (const entry of entries) {
                        entry.sumR = sumR;
                        entry.sumY = sumY;
                        entry.smtime = count;
                        newData.push(entry);
                    }
                }

                console.log(newData);
                this.tableData = newData

            },
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 5 || columnIndex === 6) {
                        return {
                            rowspan: row.smtime,
                            colspan: 1
                        };
                    }
                }
            },
            onSubmit() {
                console.log('submit!');
            }
        }
    })
</script>

</html>