antd--＜Tree＞的开发应用

最新推荐文章于 2024-01-11 15:00:37 发布

前端小妹

最新推荐文章于 2024-01-11 15:00:37 发布

阅读量84

点赞数

分类专栏： antd 文章标签：前端

本文链接：https://blog.csdn.net/qq_51545524/article/details/120859814

版权

antd 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

"本文介绍如何将后台返回的包含'process'和"log_level"数据结构转换为树状展示，并通过JavaScript实现节点的父子关系转换。涉及了对象映射、树形结构构建和页面元素的动态样式调整。"

摘要由CSDN通过智能技术生成

后台返回的数据

 "data": {
   "process": [ 
   		"conf.config",
   		"algorithm.base",
   		"common.helper.msg_helper",
   ],
   "log_level": [
  		"INFO",
  		"ERROR",
   ]
 }

展示成树结构

处理1

let objMap = Object.entries(data)

返回，将父子换为0，1

在这里插入图片描述

导航树

  objMap.map(item => {
            return {
                title:item[0],
                key:item[0],
                children: item[1].map(i => {
                    return {
                        title:i || '-',
                        key: `${item[0]}$Ch%id${i}`,
                    }

                })
            }

        })