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

news/2024/7/10 23:52:43 标签: javascript, es6, vue, uniapp, react

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

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

目录概览

    • 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.niftyadmin.cn/n/5002815.html

相关文章

vue 使用qrcode生成二维码并可下载保存

安装qrcode npm install qrcode --save代码 <template><div style"display: flex; flex-direction: column; align-items: center; justify-content center;"><div>查看溯源码&#xff0c;<a id"saveLink" style"text-decorati…

Python连接SQLite数据库基础教程

SQLite是一种轻量级的嵌入式数据库&#xff0c;常用于小型项目和移动应用程序。Python提供了内置的sqlite3模块&#xff0c;可以方便地连接和操作SQLite数据库。本文将介绍如何使用Python连接SQLite数据库&#xff0c;并进行基本的数据操作。 安装SQLite和sqlite3模块 首先&a…

未加载Qt6Core.pdb

编译代码发现未加载.pdb。 问题是Qt6的bin目录下也没有.pdb文件啊&#xff1f; 有两种方法&#xff0c;一是把Qt路径放到环境变量下&#xff0c;这样系统就能找到Qt6需要的依赖项。 二是在生成目录下找到编译好的.exe文件&#xff0c;然后调用windeployqt.exe为其生成依赖项&…

数据库管理系统(DBMS)的事务四大特性(ACID)以及事务的四种隔离级别

一、什么是ACID&#xff1f; ACID是原子性&#xff08;Atomicity&#xff09;、一致性&#xff08;Consistency&#xff09;、隔离性&#xff08;Isolation&#xff09;和持久性&#xff08;Durability&#xff09; 的缩写&#xff0c;是在可靠数据库管理系统&#xff08;DBMS&…

划分Vlan时需要注意的问题

网络部分2019年才开始学习的&#xff0c;在学习过程中配置了整个公司的网络&#xff0c;心里才有了一点把握&#xff0c;算是掌握了最基本的。 不会的就上网学&#xff0c;反正网络上什么知识都有&#xff0c;只要有需求就对照着学&#xff0c;很长时间没有学习网络了&#xff…

Java是如何实现线程间通信的?

在Java中&#xff0c;线程间通信可以通过以下方式实现&#xff1a; 1.共享变量 线程可以通过共享的变量进行通信。多个线程可以读写同一个变量来交换信息。在这种情况下&#xff0c;需要确保线程对共享变量的访问是同步的&#xff0c;以避免数据竞争和不一致的结果。 以下是一…

spring 面试题总结

spring boot 变更jackson的json序列化方式 要变更Jackson库的JSON序列化方式&#xff0c;你可以使用自定义的JsonSerializer&#xff0c;并在需要进行自定义序列化的属性或类上使用JsonSerialize注解来指定自定义的JsonSerializer。下面是一个简单的示例&#xff1a; 首先&am…

关于人工智能的担忧

人工智能的快速发展引发了一系列关于其潜在风险和担忧的讨论。以下是一些常见的人们对人工智能的担忧&#xff1a; 失业问题&#xff1a;人工智能的出现可能会导致很多工作岗位的消失&#xff0c;特别是那些需要重复性劳动的工作。人们担心机器取代人类工作将导致大规模失业和社…