el-table原始列表转换成树形数据

element-ui的el-table可以显示树形数据,不过对数据格式有要求,只有带children属性的行才能树形展开和收起,假设原始数据是json列表,数据已经按colx排序,我们希望在el-table中同colx值得只显示一条,有多条数据的可以树形展开和收起。下面我们用js来实现,该转换功能在node后端或者javascript前端都可以。

javascript 复制代码
function tree(list){
	if (list.length==0) return [];
	let newlist=[list[0]];
	
	for (let i=1;i<list.length;i++) {
		if (list[i]["colx"]===newlist[newlist.length-1]["colx"]) { 
			if (newlist[newlist.length-1]["children"]==undefined) {
				newlist[newlist.length-1]["children"]=[list[i]]
				}
			else { newlist[newlist.length-1]["children"].push(list[i]); }
			}
		else {
			newlist.push(list[i]);
			}
		}
	return newlist;
	}
相关推荐
天天扭码几秒前
一杯柠檬水的时间 | 让你理解前端性能优化的核心武器——防抖节流 ψ(`∇´)ψ
前端·javascript·面试
前端大白话几秒前
震惊!90%前端工程师都选错!一文揭秘useReducer与Redux状态管理真相
前端·javascript·react.js
看晴天了6 分钟前
JavaScript 常用的操作符
前端·javascript·vue.js
前端大白话9 分钟前
惊!10行代码实现fetch并发请求!前端工程师必看的错误处理神操作
前端·javascript·设计模式
白瓷梅子汤9 分钟前
Object.create(null) --> "纯净对象"
前端·javascript
Mintopia43 分钟前
JavaScript 中的计算机图形学核心知识点详解
前端·javascript·计算机图形学
BillKu1 小时前
vue3中nextTick的作用及示例
javascript·vue.js·ecmascript
john_Asura1 小时前
Vue3 自定义指令完全指南
前端·javascript·vue.js·npm·html
独立开阀者_FwtCoder1 小时前
用分层结构扩展你的 React 项目
前端·javascript·后端
独立开阀者_FwtCoder1 小时前
AI 神器!一键把 Vue3 源码解析成文档!
前端·javascript·vue.js