前端对数据进行分组和计数处理

vues

已于 2024-03-31 22:58:33 修改

阅读量410

点赞数 2

文章标签：前端

于 2024-03-31 22:56:20 首次发布

本文链接：https://blog.csdn.net/hbwang_716/article/details/137211957

版权

文章介绍了如何在JavaScript中使用reduce函数对数组进行操作，如查找具有相同group_id的项并合并行span属性，以实现表格数据的动态合并。

摘要由CSDN通过智能技术生成

js对数组数据的处理，添加属性，合并表格数据。

let data=[
    {
        id:'1',
        group_id:'111'
    },
    {
        id:'2',
        group_id:'111'
    },
    {
        id:'3',
        group_id:'111'
    },
    {
        id:'4',
        group_id:'222'
    },
    {
        id:'5',
        group_id:'222'
    }
]

let tempData=data;
tempData=tempData.reduce((arr,item)=>{
    let find=arr.find(i=>i.group_id===item.group_id);
    let tempObj={...item,rowSpan:1};
    if(find){
        find.rowSpan++;
        arr.push(item);
    }else{
        arr.push(tempObj);
    }
    return arr;
},[])

console.log(data,tempData)