在项目中需要把数组转换为树形结构经常会遇到，所以封装成方法需要时引用会更方便
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
// } // }
// ] // ]
// }
// ]
// }
// ]