前言：
后端传给我一个没有处理过的json串，但是我要传入el-tree做渲染，此篇来记录一下整个数据处理过程以及el-tree的使用
需求描述：
一、树结构可以展开可以收缩，默认全部展开
二、有一些关键词需要高亮展示红色
三、树结构左边加线条，使得树结构看起来更直观
（如下图）
后端传过来的参数：
"{\"frame\":{\"frame.interface_id\":\"0\",\"frame.interface_id_tree\":{\"frame.interface_name\":\"p11p1\"},\"frame.encap_type\":\"1\",\"frame.time\":\"Sep 30, 2024 08:47:16.070993552 UTC\",\"frame.offset_shift\":\"0.000000000\",\"frame.time_epoch\":\"1727686036.070993552\",\"frame.time_delta\":\"1.363581003\",\"frame.time_delta_displayed\":\"1.363581003\",\"frame.time_relative\":\"283.445248479\",\"frame.number\":\"222\",\"frame.len\":\"60\",\"frame.cap_len\":\"60\",\"frame.marked\":\"0\",\"frame.ignored\":\"0\",\"frame.protocols\":\"eth:ethertype:data\"},\"eth\":{\"eth.dst\":\"ff:ff:ff:ff:ff:ff\",\"eth.dst_tree\":{\"eth.dst_resolved\":\"Broadcast\",\"eth.dst.oui\":\"16777215\",\"eth.addr\":\"ff:ff:ff:ff:ff:ff\",\"eth.addr_resolved\":\"Broadcast\",\"eth.addr.oui\":\"16777215\",\"eth.dst.lg\":\"1\",\"eth.lg\":\"1\",\"eth.dst.ig\":\"1\",\"eth.ig\":\"1\"},\"eth.src\":\"7c:d9:a0:69:e9:9c\",\"eth.src_tree\":{\"eth.src_resolved\":\"HuaweiTe_69:e9:9c\",\"eth.src.oui\":\"8182176\",\"eth.src.oui_resolved\":\"Huawei Technologies Co.,Ltd\",\"eth.addr\":\"7c:d9:a0:69:e9:9c\",\"eth.addr_resolved\":\"HuaweiTe_69:e9:9c\",\"eth.addr.oui\":\"8182176\",\"eth.addr.oui_resolved\":\"Huawei Technologies Co.,Ltd\",\"eth.src.lg\":\"0\",\"eth.lg\":\"0\",\"eth.src.ig\":\"0\",\"eth.ig\":\"0\"},\"eth.type\":\"0x00009998\"},\"data\":{\"data.data\":\"00:01:00:00:00:0d:00:00:00:04:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00\",\"data.len\":\"46\"}}
el-tree要的参数：
一、使用el-tree组件
<div class="custom-tree-node-container"><el-treestyle="max-width: 600px":data="trafficDetail"node-key="id"default-expand-all:props="{ class: customNodeClass }"/></div>具体参数element官网都有，可以自行去查看
二、处理数据
1、先将json格式转换成对象
console.log(JSON.parse(val), "json转化后的结果");
结果可以看到就是一个多层对象：
2、写递归函数来处理
function transformObjectToArray(obj, idCounter = { currentId: 0 }) {const result = [];// 定义需要添加 isPenultimate 的标签const penultimateLabels = ["ip.version", "ah.", "vlan", "mac", "mpls."];for (const key in obj) {if (obj.hasOwnProperty(key)) {const item = {id: idCounter.currentId++, // 生成唯一IDlabel: key,children: []};// 检查是否需要添加 isPenultimate 属性if (penultimateLabels.includes(key)) {item.isPenultimate = true;}// 检查是否存在子对象if (typeof obj[key] === 'object' && obj[key] !== null) {// 递归调用以处理子对象item.children = transformObjectToArray(obj[key], idCounter);} else {// 如果不是对象，则直接放入 childrenitem.children.push({ id: idCounter.currentId++, label: obj[key] });}result.push(item);}}return result;
}// 测试数据const input = {"eth.dst": "01:80:c2:00:00:00","eth.dst_tree": {"eth.dst_resolved": "Spanning-tree-(for-bridges)_00","eth.dst_tree": {"eth.dst_resolved": "Spanning-tree-(for-bridges)_00","eth.dst.oui": "98498",},},"ip.version": "IPv4","ah.": "AH Value",vlan: "VLAN 100",mac: "00:1A:2B:3C:4D:5E","mpls.": "MPLS Value",};// 转换并输出结果const output = transformObjectToArray(input);console.log(JSON.stringify(output, null, 2));输出结果：
注：
1、这里用了currentId给树结构加一个id来代表唯一值，因为el-tree默认展开的时候需要唯一值；（需求一）
2、penultimateLabels里面放的就是需要高亮展示的关键词，添加 isPenultimate 属性就是为了标记需要高亮的node，编写css来搭配使用：
:deep .is-penultimate > .el-tree-node__content {color: red;
}再加上一个类处理函数;（需求二）
const customNodeClass = (data, node) => {if (data.isPenultimate) {return "is-penultimate";}return null;
};3、给树结构加辅助线功能，简单来说就是给该给的盒子加上左边框：（需求三）
:deep .el-tree > .el-tree-node > .el-tree-node__children > .el-tree-node {border-left: black 1px dashed;position: relative;left: 15px;}:deep.el-tree> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__children {border-left: black 1px dashed;position: relative;left: 25px;}
