总结开发中一些数据处理方法的封装

news2024/11/25 10:56:48

在这里插入图片描述
摘要:

开发中经常会遇到一些组件需要的特定数据结构,后端不一定会返回你需要的数据结构的,所以还是要前端来处理的!这里来总结一下平常开发中遇到的需要处理结构的方法,下次遇到直接拿来用就可以了!

目录概览

    • el-tree根据id处理成树形结构数据

el-tree根据id处理成树形结构数据

要将使用el-tree组件的数据处理成树形结构,您可以按照以下步骤进行操作:

首先,确保您的数据具有id和parentId字段,用于表示节点之间的父子关系。假设您的数据如下所示:

const data = [
  { id: 1, name: '节点1', parentId: 0 },
  { id: 2, name: '节点2', parentId: 1 },
  { id: 3, name: '节点3', parentId: 1 },
  { id: 4, name: '节点4', parentId: 2 },
  { id: 5, name: '节点5', parentId: 2 },
  { id: 6, name: '节点6', parentId: 3 },
];

接下来,您可以使用以下代码将此平铺的数据转换为树形结构:

function buildTree(data, parentId = 0) {
  const result = [];
  for (let i = 0; i < data.length; i++) {
    if (data[i].parentId === parentId) {
      const children = buildTree(data, data[i].id);
      if (children.length > 0) {
        data[i].children = children;
      }
      result.push(data[i]);
    }
  }
  return result;
}
const treeData = buildTree(data);

通过以上代码,您将获得一个根据id处理后的树形结构数据treeData。

最后,您可以将treeData作为el-tree组件的数据源进行渲染。在el-tree中,只需将treeData绑定到data属性即可:

<el-tree :data="treeData"></el-tree>

这样,el-tree就会根据提供的数据treeData自动生成树形结构。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/973801.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

云架构师学习------技术路线与总结

云架构师学习------技术路线与总结 云架构师学习------技术路线与总结一、什么是架构IT架构-数据架构-应用架构IT架构应用架构数据架构 架构的六个层面基础设施层数据层中间层基础服务层业务服务层用户接口层 二、云计算的历史演进与基本原理云计算的本质&#xff1a;资源到架构…

小度音响 小众安卓手机 个别车机等系列mtk芯片刷机 修改 导出系统 root等操作解析

目前很多机型采用的是mtk芯片。包括小度1C.个别车机 或者其他安卓设备。这类机型很少有官方固件或者未曾流出。有的机型限制刷机 root 安装软件等等。那么类似的设备有没有方法来root或者导出系统呢。其实前面几篇博文中我有介绍如何提取备份mtk芯片的系统。今天在这些博文的基…

企业文件数据透明加密保护——防泄密软件系统

天锐绿盾电脑文件数据透明加密、防泄密系统是一款全面的加密软件系统&#xff0c;主要从源头上保障数据安全和使用安全。该系统采用文件过滤驱动实现透明加解密&#xff0c;对用户完全透明&#xff0c;不影响用户操作习惯&#xff0c;从源头上保障企业数据安全。通过对电子文档…

ajax day2

1、 2、控制弹框显示和隐藏&#xff1a; 3、右键tr&#xff0c;编辑为html&#xff0c;可直接复制tr部分的代码 4、删除时&#xff0c;点击删除按钮&#xff0c;可以获取图书id&#xff1a; 5、编辑图书 快速赋值表单元素内容&#xff0c;用于回显&#xff1a; 6、hidden …

python开发之个微机器人的二次开发

简要描述&#xff1a; 取消消息接收 请求URL&#xff1a; http://域名地址/cancelHttpCallbackUrl 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/json 参数&#xff1a; 参数名类型说明codestring1000成功&#xff0c;1…

MySql学习笔记12——数据库设计三范式

数据库设计三范式 第一范式&#xff1a;要求任何一张表必须有主键&#xff0c;每一个字段原子性不可再分。 第二范式&#xff1a;建立在第一范式之上&#xff0c;要求所有非主键字段必须完全依赖主键&#xff0c;不能部分依赖 第三范式&#xff1a;建立在第二范式之上&#…

分享2款微课录制软件,保证让你满意!

“录微课用什么软件呀&#xff0c;真的服了&#xff0c;平台自带的录屏画质太差了&#xff0c;完全看不清讲的内容&#xff0c;而且音质也不是很好&#xff0c;大家有没有微课录制的软件推荐&#xff0c;谢谢啦” 随着教育方式的转型和技术的发展&#xff0c;微课程成为了一种…

虚拟机(三)VMware Workstation 桥接模式下无法上网

目录 一、背景二、解决方式方式一&#xff1a;关闭防火墙方式二&#xff1a;查看桥接模式下的物理网卡是否对应正确方式三&#xff1a;查看物理主机的网络属性 一、背景 今天在使用 VMware Workstation 里面安装的 Windows 虚拟机的时候&#xff0c;发现虽然在 NAT 模式下可以…

2023年9月NPDP产品经理国际认证报名,当然弘博创新

产品经理国际资格认证NPDP是新产品开发方面的认证&#xff0c;集理论、方法与实践为一体的全方位的知识体系&#xff0c;为公司组织层级进行规划、决策、执行提供良好的方法体系支撑。 【认证机构】 产品开发与管理协会&#xff08;PDMA&#xff09;成立于1979年&#xff0c;是…

C#,数值计算——NRf1(UniVarRealValueFun)的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { public class NRf1 : UniVarRealValueFun { public RealValueFun y1; public RealValueFun y2; public NRf2 f2; public NRf1(RealValueFun y1, RealValueFun y2, RealValueFun z1,…

IMAU鸿蒙北向开发-2023年9月4日学习日志

1 HarmonyOS 1.1 南向设备开发与北向应用开发 上北下南&#xff0c;上层应用开发叫北向&#xff0c;底层设备开发叫南向。 北向&#xff1a;指的纯应用软件开发&#xff0c;基于官方提供的系统SDK进行应用开发&#xff0c;HarmonyOS 目前支持使用java、js、 ets、c、c进行开发…

丢失msvcp110.dll是什么意思?msvcp110.dll丢失的解决方法

当您在使用电脑时&#xff0c;可能会遇到这样的提示&#xff1a;“由于缺少msvcp110.dll文件&#xff0c;无法启动此程序。”那么&#xff0c;丢失msvcp110.dll到底是什么意思呢&#xff1f;又该如何解决这个问题呢&#xff1f;接下来&#xff0c;我将为您详细解答。 丢失msvcp…

笔记本家庭版本win11上win+r,运行cmd默认没有管理员权限,如何调整为有管理员权限的

华为matebookeGo 笔记本之前有段时间不知怎么回事&#xff0c;打开运行框&#xff0c;没有了那一行“使用管理权限创建此任务”&#xff0c;而且cmd也不再是默认的管理员下的&#xff0c;这很不方便,虽然每次winr &#xff0c;输入cmd后可以按ctrlshitenter以管理员权限运行&am…

八路DI八路DO,开关量远程IO模块,Modbus TCP数据采集模块 YL90-RJ45

特点&#xff1a; ● 八路开关量输入&#xff0c;八路开关量输出 ● DI状态变化自动发送状态数据&#xff0c;可以捕获脉冲 ● 采用Socket自由协议编程简单、轻松应用 ● 开关量毫秒级响应速度适应多种场合 ● 内置网页功能&#xff0c;可以通过网页查询与控制 ● 同时也…

微型计算机原理知识点总结(一)

目录 一.微型计算机 二.微型计算机系统 1.微型计算机硬件系统 冯诺依曼体系结构 总线 (1)微处理器(CPU) 运算器 控制器 内部寄存器 (2)存储器 1.基本概念 2.内存的操作 3.内存的分类 (3)I/O接口与输入/输出设备 2.微型计算机软件系统 (1)系统软件 操作系统 …

SpringBoot实现发送邮件功能

平时注册或者登录一个网站时&#xff0c;可能收到过邮件用来发送验证码等&#xff0c;邮件在项目中经常会被用到&#xff0c;比如邮件发送通知&#xff0c;比如通过邮件注册&#xff0c;认证&#xff0c;找回密码&#xff0c;系统报警通知&#xff0c;报表信息等。 发送邮件用…

第一次做接口测试用例

一、简介 在开始接口测试之前&#xff0c;我们想一下&#xff0c;接口测试的流程是什么&#xff1f;说到这里&#xff0c;有些人就会产生好奇和疑问&#xff0c;心里mmp&#xff1a;接口测试要什么流程哈&#xff1f;&#xff1f;&#xff1f;不就是参考接口文档&#xff0c;直…

金蝶云星空对接打通赛意SMOM委外退料单接口与保存ASN数据接口

金蝶云星空对接打通赛意SMOM委外退料单接口与保存ASN数据接口 对接源平台:金蝶云星空 金蝶K/3Cloud&#xff08;金蝶云星空&#xff09;是移动互联网时代的新型ERP&#xff0c;是基于WEB2.0与云技术的新时代企业管理服务平台。金蝶K/3Cloud围绕着“生态、人人、体验”&#xff…

数据结构(一)Trie字符串统计

目录 代码 &#xff08;一&#xff09;输入cat son[p][u],p表示儿子&#xff0c;u表示第几个儿子 0的根的节点编号为idx -------------------------------------------------------- 根是0的有个儿子c&#xff0c;编号为1的节点有个子节点为a&#xff0c;a的编号是2&#xf…

SegNeXt学习记录(一):配置环境 测试代码

安装配置MMSegmentation环境 为了验证 MMSegmentation 和所需的环境是否安装正确&#xff0c;我们可以运行示例 python 代码来初始化分段器并推断演示图像&#xff1a; from mmseg.apis import inference_segmentor, init_segmentor import mmcvconfig_file configs/pspnet/…