数组数据处理为树形结构

491 阅读3分钟

在项目中需要把数组转换为树形结构经常会遇到,所以封装成方法需要时引用会更方便

1、在src文件下新建utils文件夹(此文件夹一般存放自己封装的公共的工具类函数),新建tool.js文件

代码如下:

// 数组转成树形结构

export const toTree = function (arr) {

  // 新建result空数组 
  let result = [];     
  
  let data = JSON.parse(JSON.stringify(arr));     //深度拷贝 
  
  // 数据必须为数组
  if (!Array.isArray(data)) {
    return result;
  }
  
  data.sort(compare); // 排序

  // 删除所有的children,以防止多次调用
  data.forEach(item => {
    delete item.children;
  });

  let map = {};                // 新建一个map对象
  data.forEach(item => {       
    map[item.id] = item;       // map对象属性名为本条数据的id,属性值为本条数据
  });

  data.forEach(item => {       
    let parent = map[item.pid];     // 创建一个parent变量,值为本条数据父级id所对应的数据
    if (parent) {                   // 如有父级数据(表示当前数据不是顶层数据),则新增对象名为children,对象值为本条数据
      (parent.children || (parent.children = [])).push(item);
    } else {
      result.push(item);            // 否则添加至result数组
    }
  });
  return result;
};

// 升序
const compare = function (obj1, obj2) {
  let sort1 = obj1.sort;
  let sort2 = obj2.sort;
  if (sort1 < sort2) {
    return -1;
  } else if (sort1 > sort2) {
    return 1;
  } else {
    return 0;
  }
};

2、在index.vue中引用

引入自定义的方法

import { toTree } from "@/utils/tool";

js代码

// 获取所有权限菜单
    getAllMenu(){
      menuList({}).then(res => {
        if(res.code === 0) {
          this.allMenu = toTree(res.data);
        }else {
          this.$message.error(res.message)
        }
      })
    },

数据处理前后

// 例如:数据处理前                                                                   // 数据处理后
// [                                                                            // [
//   {                                                                          //   {
//     id: "9e109296b0ed411997d10d3b82fb3af7"                                   //     id: "9e109296b0ed411997d10d3b82fb3af7"
//     isadmin: 0                                                               //     isadmin: 0
//     menulevel: 0                                                             //     menulevel: 0
//     menuname: "首页"                                                         //     menuname: "首页"
//     menutype: 0                                                              //     menutype: 0
//     pid: "0"                                                                 //     pid: "0"
//     sort: -4                                                                 //     sort: -4
//   },                                                                         //     children:[
//   {                                                                          //       {
//     id: "1dab82b987c2425c9d207306390c0601"                                   //         id: "1dab82b987c2425c9d207306390c0601"
//     isadmin: 0                                                               //         isadmin: 0
//     menulevel: 1                                                             //         menulevel: 1
//     menuname: "首页"                                                         //         menuname: "首页"
//     menutype: 0                                                              //         menutype: 0
//     pid: "9e109296b0ed411997d10d3b82fb3af7"                                  //         pid: "9e109296b0ed411997d10d3b82fb3af7"
//     sort: 12                                                                 //         sort: 12
//   },                                                                         //         children:[
//   {                                                                          //           {
//     id: "1f066303c0704a5d827b663a20951f5b"                                   //             id: "1f066303c0704a5d827b663a20951f5b"
//     isadmin: 0                                                               //             isadmin: 0
//     menulevel: 2                                                             //             menulevel: 2
//     menuname: "上传"                                                         //             menuname: "上传"
//     menutype: 0                                                              //             menutype: 0
//     pid: "1dab82b987c2425c9d207306390c0601"                                  //             pid: "1dab82b987c2425c9d207306390c0601"
//     sort: 0                                                                  //             sort: 0
//   },                                                                         //           },
//   {                                                                          //           {
//     id: "75c5141f3a79441e920b4b09d0001255"                                   //             id: "75c5141f3a79441e920b4b09d0001255"
//     isadmin: 0                                                               //             isadmin: 0
//     menulevel: 2                                                             //             menulevel: 2
//     menuname: "修改"                                                         //             menuname: "修改"
//     menutype: 0                                                              //             menutype: 0
//     pid: "1dab82b987c2425c9d207306390c0601"                                  //             pid: "1dab82b987c2425c9d207306390c0601"
//     sort: 0                                                                  //             sort: 0
//   },                                                                         //           },
//   {                                                                          //           {
//     id: "c38f54cd86394d2582723ca6f78dd2b4"                                   //             id: "c38f54cd86394d2582723ca6f78dd2b4"
//     isadmin: 0                                                               //             isadmin: 0
//     menulevel: 2                                                             //             menulevel: 2
//     menuname: "删除"                                                         //             menuname: "删除"
//     menutype: 0                                                              //             menutype: 0
//     pid: "1dab82b987c2425c9d207306390c0601"                                  //             pid: "1dab82b987c2425c9d207306390c0601"
//     sort: 0                                                                  //             sort: 0
//   }                                                                          //           }
// ]                                                                            //         ]
                                                                                //       }
                                                                                //     ]
                                                                                //   }
                                                                                // ]