将多个数组处理成树形结构

处理函数

export const fromList = function(array, copy, value, pvalue) {
    const ret = []
    const cache = {}
    value = value || 'value'
    pvalue = pvalue || 'pvalue'
    for (let i = 0; i < array.length; ++i) {
        const ele = copy ? Object.assign({}, array[i]) : array[i]
        cache[ele[value]] = ele
    }
    for (let i = 0; i < array.length; ++i) {
        const ele = copy ? cache[array[i][value]] : array[i]
        const pele = cache[ele[pvalue]]
        if (pele) {
            if (!pele.children) {
                pele.children = []
            }
            pele.children.push(ele)
        } else {
            ret.push(ele)
        }
    }
    return ret
}

使用封装函数

import { fromList } from "@/utils/tree";

loadOrgTree() {
      return orgApi.listByOrgId(this.$store.getters.user.orgId).then(response => {
        if (response.data && response.data.length) {
          console.log(response.data)
          this.orgTreeData = fromList(response.data, true, "orgId", "parentId");
          console.log(this.orgTreeData)
        }
      }).finally(() => {
        this.treeLoading = false;
      });
    },

处理前的数据

(1794) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
[0 … 99]
0:
address: "0000000100310010"
createBy: null
createDate: "2022-05-10 10:08:39"
email: null
fax: null
leader: null
orgCode: "nan"
orgId: "003b8aa407f44813ba76195c2669aa47"
orgName: "东丰县华粮粮食储备有限公司"
parentId: "b4cf9c36dcb241fab90807ea236e11d6"
parentIds: "0,32cdbb3a278944f1a83ca40dbcc93c0a,ce42773e87604ded8aecc1a457468ff3,b4cf9c36dcb241fab90807ea236e11d6"
phoneNo: null
remarks: null
status: "0"
treeLevel: null
treeSort: null
updateBy: null
updateDate: "2022-05-10 10:08:39"
zipCode: null
[[Prototype]]: Object
1: {status: '0', createBy: null, createDate: '2022-05-10 10:08:41', updateBy: null, updateDate: '2022-05-10 10:08:41', …}
2: {status: '0', createBy: null, createDate: '2022-05-10 10:08:33', updateBy: null, updateDate: '2022-05-10 10:08:33', …}
3: {status: '0', createBy: null, createDate: '2022-05-10 10:08:37', updateBy: null, updateDate: '2022-05-10 10:08:37', …}
4: {status: '0', createBy: null, createDate: '2022-05-10 10:08:42', updateBy: null, updateDate: '2022-05-10 10:08:42', …}
5: {status: '0', createBy: null, createDate: '2022-05-10 10:08:53', updateBy: null, updateDate: '2022-05-10 10:08:53', …}

处理后的数据

[{…}]
0:
address: "0000"
children: Array(12)
0: {status: '0', createBy: null, createDate: '2022-05-10 10:08:52', updateBy: null, updateDate: '2022-05-10 10:08:52', …}
1: {status: '0', createBy: null, createDate: '2022-05-10 10:08:51', updateBy: null, updateDate: '2022-05-10 10:08:51', …}
2: {status: '0', createBy: null, createDate: '2022-05-10 10:08:55', updateBy: null, updateDate: '2022-05-10 10:08:55', …}
3: {status: '0', createBy: null, createDate: '2022-05-10 10:08:52', updateBy: null, updateDate: '2022-05-10 10:08:52', …}
4: {status: '0', createBy: null, createDate: '2022-05-10 10:08:52', updateBy: null, updateDate: '2022-05-10 10:08:52', …}
5: {status: '0', createBy: null, createDate: '2022-05-10 10:08:53', updateBy: null, updateDate: '2022-05-10 10:08:53', …}
6: {status: '0', createBy: null, createDate: '2022-05-10 10:08:52', updateBy: null, updateDate: '2022-05-10 10:08:52', …}
7: {status: '0', createBy: null, createDate: '2022-05-10 10:08:55', updateBy: null, updateDate: '2022-05-10 10:08:55', …}
8: {status: '0', createBy: null, createDate: '2022-05-10 10:08:32', updateBy: null, updateDate: '2022-05-10 10:08:32', …}
9: {status: '0', createBy: null, createDate: '2022-05-10 10:08:53', updateBy: null, updateDate: '2022-05-10 10:08:53', …}
10: {status: '0', createBy: null, createDate: '2022-05-10 10:08:51', updateBy: null, updateDate: '2022-05-10 10:08:51', …}
11: {status: '0', createBy: null, createDate: '2022-05-10 10:08:55', updateBy: null, updateDate: '2022-05-10 10:08:55', …}
length: 12
[[Prototype]]: Array(0)
createBy: null
createDate: "2022-05-10 10:08:32"
email: null
fax: null
leader: null
orgCode: "group"
orgId: "32cdbb3a278944f1a83ca40dbcc93c0a"
orgName: "中粮贸易有限公司"
parentId: "0"
parentIds: "0"
phoneNo: null
remarks: null
status: "0"
treeLevel: null
treeSort: null
updateBy: null
updateDate: "2022-05-10 10:08:32"
zipCode: null
[[Prototype]]: Object
length: 1
[[Prototype]]: Array(0)