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;
	}
相关推荐
南山安16 分钟前
Tailwind CSS:顺风CSS
javascript·css·react.js
栀秋6661 小时前
防抖 vs 节流:从百度搜索到京东电商,看前端性能优化的“节奏哲学”
前端·javascript
有意义1 小时前
深入防抖与节流:从闭包原理到性能优化实战
前端·javascript·面试
2503_928411562 小时前
12.26 小程序问题和解决
前端·javascript·微信小程序·小程序
over6972 小时前
防抖与节流:前端性能优化的“双子星”,让你的网页丝滑如德芙!
前端·javascript·面试
red润2 小时前
手把手封装Iframe父子单向双向通讯功能
前端·javascript·vue.js
gustt2 小时前
JavaScript 闭包实战:手写防抖与节流函数,优化高频事件性能
前端·javascript·面试
止水编程 water_proof2 小时前
JQuery 基础
前端·javascript·jquery
Tzarevich3 小时前
React Hooks 全面深度解析:从useState到useEffect
前端·javascript·react.js
指尖跳动的光3 小时前
前端如何通过设置失效时间清除本地存储的数据?
前端·javascript