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;
	}
相关推荐
我穿棉裤了4 分钟前
解决el-form表单校验时显示的红色星号与文字对齐的问题
前端·javascript·vue.js
时寒的笔记17 分钟前
瑞数案例欧冶解读py和js文件最终版
开发语言·javascript·ecmascript
海兰19 分钟前
【实用程序】 极简OA系统-详细设计及源码(基于Node.js + Express + SQLite + 原生前端)
sqlite·node.js·express
怕浪猫21 分钟前
Electron 开发实战(十):应用打包与分发|全平台打包、签名、自定义协议实战
前端·javascript·electron
我是伪码农26 分钟前
小程序175-200
前端·javascript·小程序
懂懂tty29 分钟前
Vue3 编译优化
前端·javascript·vue.js
低保和光头哪个先来35 分钟前
源码篇 生命周期
前端·javascript·vue.js
AI_零食36 分钟前
鸿蒙PC Electron框架天天饮水应用深度解析:健康饮水管理系统
javascript·华为·信息可视化·electron·开源·鸿蒙
用户新4 小时前
JS事件深度解析四 事件的循环和异步
前端·javascript·事件·event loop
x***r15112 小时前
nvm-windows 安装教程:Node.js 多版本管理(避坑版)
windows·node.js