首页 > 其他分享 >Tree树组件格式化数据、获取所有数据数组

Tree树组件格式化数据、获取所有数据数组

时间:2024-05-14 16:53:20浏览次数:17  
标签:node 格式化 data Tree key newItem const 数据 children

 

格式化树数据:

   function replaceNameWithTitle(data) {
        // 遍历数据数组
        return data.map(item => {
            // 复制当前对象,以免修改原始数据
            const newItem = { ...item };
            // 将 name 属性替换为 title
            newItem.title = newItem.name;
            newItem.key = newItem.uuid;
            newItem.value = newItem.uuid;
            // 删除原始的 name 属性
            //   delete newItem.name;
            //   newItem.disabled = newItem?.level != 1
            //   如果当前对象有 children 属性,递归处理子节点
            if (newItem.children && newItem.children.length > 0) {
                newItem.children = replaceNameWithTitle(newItem.children);
            } else {
                newItem.children = null
            }


            // 返回处理后的对象
            return newItem;
        });
    }
    const treeData = useMemo(() => replaceNameWithTitle(modelTreeData?.children || []), [modelTreeData])

所有数据数组:

   const getParentKey = (key, tree) => {
        let parentKey;
        for (let i = 0; i < tree.length; i++) {
            const node = tree[i];
            if (node.children) {
                if (node.children.some((item) => item.key === key)) {
                    parentKey = node.key;
                } else if (getParentKey(key, node.children)) {
                    parentKey = getParentKey(key, node.children);
                }
            }
        }
        return parentKey;
    };
    const dataList = useMemo(() => {
        let newdataList = []
        const generateList = (data) => {
            for (let i = 0; i < data.length; i++) {
                const node = data[i];
                const { id, title, level } = node;
                newdataList.push({ key: id, title: title, level: level });
                if (node.children) {
                    generateList(node.children);
                }
            }
        };

        generateList(deviceTypeListData)

        return newdataList

    }, [treeData])

 

标签:node,格式化,data,Tree,key,newItem,const,数据,children
From: https://www.cnblogs.com/Simoon/p/18191683

相关文章

  • openGauss 使用逻辑复制工具复制数据
    使用逻辑复制工具复制数据目前支持openGauss逻辑复制的工具有SDR和DRS。复制工具从openGauss抽取逻辑日志后到对端数据库回放。对于使用JDBC连接数据库的复制工具,具体代码请参考示例:逻辑复制代码示例。详情查看:https://opengauss.org详情查看:https://docs-opengauss.osinfra.cn......
  • 如何在华企盾DSC数据防泄密系统中自定义加密级别?
    在华企盾DSC系统中,你可以通过密级权限功能来自定义加密文件的密级高低。每个终端下都有严格的受限范围,文件密级的高低将直接决定该终端是否拥有打开该加密文件的权利。如果不在权限范围内,则无法打开该加密文件。详细步骤如下:登录华企盾DSC系统的管理控制台。导航加密控制,找......
  • Mysql批量插入数据(python脚本)
    有个需求:需要在table1中插入205条数据,role_id固定为65,menu_id从91开始方法二:python脚本实现PyMySQL是一个纯Python编写的MySQL客户端库,用于连接和操作MySQL数据库。以下是PyMySQL的主要功能和优点:功能:数据库连接:PyMySQL提供了connect()方法,用于建立与MySQL数据库的连接。一旦......
  • Rust数据驱动-参数化测试
    需求假如有以下测试用例,同样的逻辑,我们需要测试多组数据。modtests{#[test]fntest_add(){leta=1;letb=2;assert_eq!(a+b,3);}}一般情况下我们不在用例中使用for循环(即subtests子测试模式)来验证多组数据。modtest......
  • Mysql批量插入数据
    有个需求:需要在table1中插入205条数据,role_id固定为65,menu_id从91开始方法一:存储过程1、什么是存储过程?MySQL存储过程(StoredProcedure)是一组为了完成特定功能的SQL语句集合。用户通过指定的存储过程名称和参数(如果有的话)来调用并执行它。存储过程可以在程序中被多次调用,并......
  • 自动生成测试数据
    AutoFixtureAutoFixture是一个用于.NET的测试工具,它允许开发者在单元测试中自动生成随机的测试数据。它支持广泛的数据类型,包括常见的基元类型、复杂对象、集合等。AutoFixture通过使用继承、接口、属性和构造函数等机制来推断如何创建复杂的对象。安装:Install-PackageAut......
  • kafka数据一致性
    kafka作为商业级中间件,它在设计时优先考虑的可靠性、可用性,同时兼顾一致性,这是所有分布式都会遇到的cap理论,kafka也不例外;可靠性通过副本机制解决,可用性通过leader和follower机制来解决。   kafka的可靠性,根据ack的设置不同,可靠性不同,ack=-1可靠性最高,但效率会稍微低一点。......
  • easyUI datagrid 数据不显示,tablebody 高度为0 的问题
    如下图,接口请求回来数据,表头也显示出来了。打开元素,可以看到table的bbody里面是有数据的,数据也渲染到了页面表格中,但是table的height为0。 排查以下问题:检查数据源格式是否正确,如是JSON数组还是符合easyui要求的对象。确保在datagrid初始化后正确触发数据加载......
  • linux安装华为高斯数据库
     华为安装部署流程:https://doc.hcs.huawei.com/db/zh-cn/gaussdbqlh/2.23.07.210/install/qlh_04_0025.html高斯数据库文档说明书下载:https://support.huawei.com/enterprise/zh/cloud-computing/gaussdb-pid-251517148https://www.modb.pro/db/11248用docker快速安装:https:/......
  • 震撼视觉:全球冰川数据大屏揭示冰川之美与奥秘
    在浩瀚无垠的宇宙中,地球以其独特的蓝色光环吸引着人们的目光。而在这颗蓝色星球上,冰川这一大自然的杰作,更是以其壮美与神秘,让人们心驰神往。 从阿尔卑斯山脉的冰川到南极洲的冰盖,从格陵兰岛的冰山到喜马拉雅山脉的雪山,这些冰川在数据大屏上以高清画质呈现,仿佛让人置身于冰川世......