Vue实战(十):对数组数据的拆分和分组合并

Vue实战(十):对数组数据的拆分和分组合并

数据初始化

js 复制代码
//第一种情况
tableData: [
	{ id: 1, name: ["A", "B"] },
	{ id: 2, name: ["A", "C"] },
	{ id: 3, name: ["B", "C"] },
	{ id: 4, name: ["A", "B", "C"] },
],
//第二种情况
tableData1: [
	{ id: 1, name: ["A"] },
	{ id: 2, name: ["B"] },
	{ id: 3, name: ["C"] },
],
//第三种情况
tableData2: [
	{ id: 1, name: ["A"] },
	{ id: 2, name: ["A"] },
	{ id: 3, name: ["C"] },
],

分解数据

js 复制代码
separateData(arr) {
	let newArr = [];
	arr.forEach((item) => {
		item.name.forEach((it) => {
			var obj = {};
			this.$set(obj, "id", item.id);
			this.$set(obj, "name", it.split(","));
			newArr.splice(newArr.length, 0, obj);
		});
	});
	return newArr;
}

分组数据

js 复制代码
groupBy(objectArray, property) {
	return objectArray.reduce(function (acc, obj) {
		var key = obj[property];
		if (!acc[key]) {
			acc[key] = [];
		}
		acc[key].push(obj);
		return acc;
	}, {});
}

第一种情况测试

js 复制代码
console.log(JSON.stringify(this.tableData));
let arr = this.separateData(this.tableData);
console.log(JSON.stringify(arr));
let result = this.groupBy(arr, "name");
console.log(JSON.stringify(result));

第二种情况测试

js 复制代码
console.log(JSON.stringify(this.tableData1));
let arr = this.separateData(this.tableData1);
console.log(JSON.stringify(arr));
let result = this.groupBy(arr, "name");
console.log(JSON.stringify(result));

第三种情况测试

js 复制代码
console.log(JSON.stringify(this.tableData2));
let arr = this.separateData(this.tableData2);
console.log(JSON.stringify(arr));
let result = this.groupBy(arr, "name");
console.log(JSON.stringify(result));
相关推荐
hax2 分钟前
deepseek-R1 理解代码能力一例
javascript·deepseek
brzhang4 分钟前
效率神器!TmuxAI:一款无痕融入终端的AI助手,让我的开发体验翻倍提升
前端·后端·算法
海底火旺6 分钟前
JavaScript 原型链检查:从 `instanceof` 到 `isPrototypeOf` 的演进
前端·javascript·面试
埃兰德欧神6 分钟前
Lynx:革新跨端开发,一次编写,多端闪耀
前端·javascript·前端框架
贾公子9 分钟前
详解 LeetCode 第 242 题 - 有效的字母组
前端
前端太佬15 分钟前
小程序登录与授权功能全解析:从原理到设计的实战指南 (2025年最新规范实践版)
前端·微信·微信小程序
一抓掉一大把20 分钟前
elementui日历显示红点及根据日程范围判断是否有红点
前端·javascript·elementui
前端.火鸡20 分钟前
使用wavesurferJs实现录音音波效果
开发语言·前端·javascript
Sahas101922 分钟前
vite+vue2+elementui构建之 vite.config.js
vue.js·elementui
anyup28 分钟前
借助 Trae 从 0 到 1 实现海外地图渲染(leaflet + OSM)
前端·数据可视化·trae