主要是在组件和后端返回的数据之间,或者组件产⽣的数据和需要提交给后端的数据之间,有可能会出 现结构对不上,这个时候可能会处理⼀下,举个例⼦,⽐如说我们常⽤的tree型组件要求必须是嵌套的 tree型数组,这个时候就需要处理⼀下,再⽐如提交的时候接⼝要求的是字符串,我们组件给到的数组, 也需要处理

追问: 既然说到了树形处理,说⼀下处理的思路

树形数据处理,通常后端那边返回的格式是⼀个普通的平铺结构,不过⼀般都会有⼀个pid字段,可以根 据它找到⾃⼰的⽗节点,那办法就有了,或者使⽤递归的⽅式,性能好⼀点的话可以采⽤⾮递归的⽅式 都可以,主要还是⼀个寻找⽗节点的过程 继续追问:

详细说说呢,伪代码思路是怎么样⼦的?

我们可以按照下⾯的步骤去写这个处理函数 1. 可以先遍历原数组以它的id作为key,本身作为value形成⼀个对象结构 2. 再次遍历原数组,通过每⼀项的pid字段取第⼀步形成的对象中尝试进⾏对象取值,如果取到了值就 把⾃⼰push到它chilren属性中,如果找不到代表它本身就是最外层的⽗节点,直接push到函数最终 产出的数组中

⼯作中有做过数据处理吗? tree 组件 根据 pid 寻找父节点的更多相关文章

  1. [CareerCup] 4.7 Lowest Common Ancestor of a Binary Search Tree 二叉树的最小共同父节点

    4.7 Design an algorithm and write code to find the first common ancestor of two nodes in a binary tr ...

  2. [LeetCode] Lowest Common Ancestor of a Binary Tree 二叉树的最小共同父节点

    Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According ...

  3. Element ui tree树形控件获取父节点id

    Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...

  4. [LeetCode] 236. Lowest Common Ancestor of a Binary Tree 二叉树的最小共同父节点

    Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According ...

  5. antd tree组件文件名换行 + 点击展开时,自动收起同级其他展开目录

    1.在项目中用 antd的tree组件的时候,遇到两个问题 1.文件名太长的话 会超出容器 很难看,解决方法如下 ` 引入css在global下设置 :global { .ant-tree li .a ...

  6. 【技术博客】使用iview的Tree组件写一棵文件树

    本次项目的前端部分使用vue框架+iview组件构建,其中IDE的文件树部分使用了iview的Tree组件,但是Tree组件本身的接口功能极其有限,网上的相关资料也不多,在使用时费了一番功夫才摸索清楚 ...

  7. [置顶] Flex中Tree组件无刷新删除节点

    在Tree组件中经常要删除某个节点,而删除之后重新刷新加载该Tree组件会影响整个操作效果和效率,因此,无刷新删除就比较好,既删除了节点也没有刷新tree,而使Tree的状态处于删除之前的状态. 无刷 ...

  8. Easyui中tree组件实现搜索定位功能及展开节点定位

    这几天遇到个input + tree  实现搜索功能的需求,在这里贴出来供大家参考下,如果你有更好的实现效果希望不腻赐教! 首先给大家看看效果     小二 上图  : 需要的部件知识: easyui ...

  9. 【Egret】中tree组件使用案例

    Egret中tree组件使用案例,包含(文本过多时,自动换行功能) 下面代码结合http://bbs.egret.com/forum.php?mod=viewthread&tid=19028& ...

  10. antd Tree组件中,自定义右键菜单

    最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...

随机推荐

  1. ComfyUI插件:ComfyUI layer style 节点(四)

    前言: 学习ComfyUI是一场持久战,而ComfyUI layer style 是一组专为图片设计制作且集成了Photoshop功能的强大节点.该节点几乎将PhotoShop的全部功能迁移到Comf ...

  2. 特朗普开始在YouTube上打竞选广告了 —— 美国总统的竞选广告已经开始媒体投放了

    相关: 拜登开始在YouTube上打竞选广告了 -- 美国总统的竞选广告已经开始媒体投放了 PS. 又多了一个猴上台,哈哈哈. 特朗普的竞选资金筹集网站:

  3. 【转载】 从零开始编写一个简单的Linux文件系统

    版权声明:本文为CSDN博主「shuxiaogd」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/shuxiao ...

  4. 清除 Nuxt 数据缓存:clearNuxtData

    title: 清除 Nuxt 数据缓存:clearNuxtData date: 2024/8/6 updated: 2024/8/6 author: cmdragon excerpt: 摘要:本文详细 ...

  5. AWG(American wire gauge)美国线规

    AWG(American wire gauge)美国线规,是一种区分导线直径的标准,又被称为 Brown & Sharpe线规.这种标准化线规系统于1857年起在美国开始使用.AWG前面的数值 ...

  6. 信创环境:鲲鹏ARM+麒麟V10离线部署K8s和Rainbond信创平台

    在上篇<国产化信创开源云原生平台>文章中,我们介绍了 Rainbond 作为可能是国内首个开源国产化信创平台,在支持国产化和信创方面的能力,并简要介绍了如何在国产化信创环境中在线部署 Ku ...

  7. Plateau-Rayleigh 不稳定性 + Young-Laplace 方程

    考虑竖直下落水柱中的 \(AB\) 两点 \[\begin{matrix} \displaystyle\frac12\rho U_0^2+\rho gz+P_A=\frac12\rho U^2(z)+ ...

  8. Ubuntu 安裝 VMware Workstation Pro

    安装 下载依赖: # Ubuntu 22.04 及以前 sudo apt install libaio1 # Ubuntu 24.04 及以后 sudo apt install libaio1t64 ...

  9. 基于surging的木舟IOT平台如何添加网络组件

    一 . 概述 为了弥补代码的遗失,木舟IOT平台正在加班加点进行研发,后面不只是针对于IOT设备接入上报,告警,视频管理,组态数据可视化大屏,后面还会有快速搭建微服务平台,利用surging.cli工 ...

  10. OpenCV开发笔记(八十):基于特征点匹配实现全景图片拼接

    前言   一个摄像头视野不大的时候,我们希望进行两个视野合并,这样让正视的视野增大,从而可以看到更广阔的标准视野.拼接的方法分为两条路,第一条路是Sticher类,第二条思路是特征点匹配.  本篇使用 ...