前言：

后端传给我一个没有处理过的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-tree
          style="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++, // 生成唯一ID
                label: 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 {
                // 如果不是对象，则直接放入 children
                item.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;
  }