vue 中 js数组变成 树形结构

简介: vue 中 js数组变成 树形结构
// 删除 所有 children,以防止多次调用
  response.data.forEach(function (item) {
      delete item.children;
  });
  // 将数据存储为 以 id 为 KEY 的 map 索引数据列
  var map = {};
  response.data.forEach(function (item) {
      map[item.menu_id] = item;
  });
  var val = [];
  response.data.forEach(function (item) {
  // 以当前遍历项,的pid,去map对象中找到索引的id
   var parent = map[item.parent_id];
   // 好绕啊,如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中
   if (parent) {
       (parent.children || ( parent.children = [] )).push(item);
       //  console.log(parent,'parentparent')
   } else {
       //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中,作为顶级
       val.push(item);
   }
response.data 就是数据源
目录
相关文章
|
2月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
73 3
|
1月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
35 4
|
21天前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
30 0
|
2月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
34 2
|
2月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
28 3
|
2月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
39 4
|
2月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
43 1
|
2月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
27 5
|
2月前
|
JavaScript 索引
Vue 3 数组变更详解:哪些操作会修改原数组?| 笔记
在处理数组时,了解哪些操作会修改原数组,哪些操作不会修改原数组,对高效编写 Vue 应用程序至关重要。本文将详细介绍 Vue 3 中的常见数组操作,并按照是否会修改原数组进行分类说明。
155 2
|
2月前
|
JavaScript 前端开发 索引
探索JavaScript数组:基础
探索JavaScript数组:基础
19 3