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;
	}
相关推荐
早點睡390几秒前
ReactNative项目OpenHarmony三方库集成实战:@react-native-oh-tpl/react-native-fast-image
javascript·react native·react.js
亿牛云爬虫专家6 分钟前
Node.js Axios爬虫代理配置指南与内存泄漏排查
爬虫·node.js·axios·爬虫代理·内存泄漏·企业级场景·tcp 连接复用
朵朵奇葩向阳开#7 分钟前
【无标题】
javascript·typescript·ruby·laravel·perl·composer
多加点辣也没关系7 分钟前
Node.js 与 npm 的安装与配置(详细教程)
前端·npm·node.js
KIO no way9 分钟前
npm全局安装命令不可用解决方案
服务器·前端·npm·node.js
暖阳常伴10 分钟前
全栈vue/react+node.js,云服务器windows部署全流程
vue.js·react.js·node.js
网络点点滴10 分钟前
组件通信-provide和inject
javascript·vue.js·ecmascript
天天向上102417 分钟前
vue2 el-table使用css的方式实现列表自动滚动
css·vue.js·elementui
早點睡39020 分钟前
ReactNative项目OpenHarmony三方库集成实战:@react-native-oh-tpl/masked-view
javascript·react native·react.js
摸鱼的春哥29 分钟前
Agent教程20:更适合编程工具的记忆方案——情景摘要
前端·javascript·后端