在項(xiàng)目中需要把數(shù)組轉(zhuǎn)換為樹形結(jié)構(gòu)經(jīng)常會(huì)遇到翻斟，所以封裝成方法需要時(shí)引用會(huì)更方便
1髓需、在src文件下新建utils文件夾（此文件夾一般存放自己封裝的公共的工具類函數(shù)）刑峡，新建tool.js文件
代碼如下：
// 數(shù)組轉(zhuǎn)成樹形結(jié)構(gòu)
export const toTree = function (arr) {
// 新建result空數(shù)組
let result = [];
let data = JSON.parse(JSON.stringify(arr)); //深度拷貝
// 數(shù)據(jù)必須為數(shù)組
if (!Array.isArray(data)) {
return result;
}
data.sort(compare); // 排序
// 刪除所有的children,以防止多次調(diào)用
data.forEach(item => {
delete item.children;
});
let map = {}; // 新建一個(gè)map對(duì)象
data.forEach(item => {
map[item.id] = item; // map對(duì)象屬性名為本條數(shù)據(jù)的id刻肄，屬性值為本條數(shù)據(jù)
});
data.forEach(item => {
let parent = map[item.pid]; // 創(chuàng)建一個(gè)parent變量吻氧，值為本條數(shù)據(jù)父級(jí)id所對(duì)應(yīng)的數(shù)據(jù)
if (parent) { // 如有父級(jí)數(shù)據(jù)（表示當(dāng)前數(shù)據(jù)不是頂層數(shù)據(jù)）溺忧，則新增對(duì)象名為children，對(duì)象值為本條數(shù)據(jù)
(parent.children || (parent.children = [])).push(item);
} else {
result.push(item); // 否則添加至result數(shù)組
}
});
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代碼
// 獲取所有權(quán)限菜單
getAllMenu(){
menuList({}).then(res => {
if(res.code === 0) {
this.allMenu = toTree(res.data);
}else {
this.$message.error(res.message)
}
})
},
數(shù)據(jù)處理前后
// 例如：數(shù)據(jù)處理前 // 數(shù)據(jù)處理后
// [ // [
// { // {
// id: "9e109296b0ed411997d10d3b82fb3af7" // id: "9e109296b0ed411997d10d3b82fb3af7"
// isadmin: 0 // isadmin: 0
// menulevel: 0 // menulevel: 0
// menuname: "首頁(yè)" // menuname: "首頁(yè)"
// 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: "首頁(yè)" // menuname: "首頁(yè)"
// 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
// } // }
// ] // ]
// }
// ]
// }
// ]
