快捷導(dǎo)航

Vue將后端數(shù)據(jù)轉(zhuǎn)成樹形結(jié)構(gòu)的方法示例代碼

更新時間：2025年06月14日 10:06:31 作者：ShareJasmine

vue是一款流行的前端框架,其中很多操作都是基于數(shù)組進(jìn)行的,這篇文章主要介紹了Vue將后端數(shù)據(jù)轉(zhuǎn)成樹形結(jié)構(gòu)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

1. 前言

需要將后端傳來的數(shù)據(jù)轉(zhuǎn)成嵌套的樹形結(jié)構(gòu)，后端數(shù)據(jù)形式如下：

[
  {
    "id": 48,
    "parentId": 47,
    "workspaceName": "工藝計(jì)劃書合集",
    "workspaceCode": "A8-B1"
  },
  {
    "id": 47,
    "parentId": null,
    "workspaceName": "工藝計(jì)劃書",
    "workspaceCode": "A8"
  },
  {
    "id": 26,
    "parentId": null,
    "workspaceName": "0501DKD工作指導(dǎo)書",
    "workspaceCode": "A2"
  },
  {
    "id": 29,
    "parentId": 26,
    "workspaceName": "月度計(jì)劃工藝包裝方案A",
    "workspaceCode": "A2-B1"
  },
  {
    "id": 35,
    "parentId": 26,
    "workspaceName": "月度計(jì)劃工藝包裝方案B",
    "workspaceCode": "A2-B2"
  }
]

2. 思路

首先，這里parentId為null的是一級父節(jié)點(diǎn)，然后其他parentId有值的掛在對應(yīng)id節(jié)點(diǎn)之后，最后整理的結(jié)果應(yīng)該是這樣一個效果：

[
  {
    "id": 47,
    "parentId": null,
    "workspaceName": "工藝計(jì)劃書",
    "workspaceCode": "A8",
    "children": {
      "id": 48,
      "parentId": 47,
      "workspaceName": "工藝計(jì)劃書合集",
      "workspaceCode": "A8-B1"
    }
  },
  {
    "id": 26,
    "parentId": null,
    "workspaceName": "0501DKD工作指導(dǎo)書",
    "workspaceCode": "A2",
    "children": [
      {
        "id": 29,
        "parentId": 26,
        "workspaceName": "月度計(jì)劃工藝包裝方案A",
        "workspaceCode": "A2-B1"
      },
      {
        "id": 35,
        "parentId": 26,
        "workspaceName": "月度計(jì)劃工藝包裝方案B",
        "workspaceCode": "A2-B2"
      }
    ]
  }
]

3. 代碼

第一種是使用ES6的map語法：

function listToTree(data) {
  const map = new Map();
  const tree = [];

  // 第一步：遍歷數(shù)據(jù)，將每一項(xiàng)存入 Map 中，并初始化 children = []
  data.forEach((p) => {
    p.children = [];
    // 將節(jié)點(diǎn)的 id 作為 key，整個節(jié)點(diǎn)對象作為 value 存入 Map
    map.set(p.id, p);
  });

  // 第二步：再遍歷一次數(shù)據(jù)，根據(jù) parentId 找到父節(jié)點(diǎn)，并將當(dāng)前節(jié)點(diǎn)加入父節(jié)點(diǎn)的 children
  data.forEach((p) => {
    // 找到父節(jié)點(diǎn)，把當(dāng)前節(jié)點(diǎn)掛載為其子節(jié)點(diǎn)
    // 注意由于 map 中的值為一個對象，屬于引用數(shù)據(jù)類型，所以這里處理 map，就可以實(shí)現(xiàn) tree 中出現(xiàn)相應(yīng)的嵌套數(shù)據(jù)
    if (p.parentId !== null && map.has(p.parentId)) {
      map.get(p.parentId).children.push(p);
    } else {
      // 如果 parentId 為 null 或找不到父節(jié)點(diǎn)，則是頂級節(jié)點(diǎn)，加入 tree 根節(jié)點(diǎn)數(shù)組
      tree.push(p);
    }
  });

  return tree;
}

第二種是若依框架的兼容IE瀏覽器的寫法：

/**
 * 構(gòu)造樹型結(jié)構(gòu)數(shù)據(jù)
 * @param {*} data 數(shù)據(jù)源
 * @param {*} id id字段 默認(rèn) 'id'
 * @param {*} parentId 父節(jié)點(diǎn)字段 默認(rèn) 'parentId'
 * @param {*} children 孩子節(jié)點(diǎn)字段 默認(rèn) 'children'
 */
export function handleTree(data, id, parentId, children) {
  let config = {
    id: id || 'id',
    parentId: parentId || 'parentId',
    childrenList: children || 'children',
  };

  var childrenListMap = {};
  var nodeIds = {};
  var tree = [];

  for (let d of data) {
    let parentId = d[config.parentId];
    if (childrenListMap[parentId] == null) {
      childrenListMap[parentId] = [];
    }
    nodeIds[d[config.id]] = d;
    childrenListMap[parentId].push(d);
  }

  for (let d of data) {
    let parentId = d[config.parentId];
    if (nodeIds[parentId] == null) {
      tree.push(d);
    }
  }

  for (let t of tree) {
    adaptToChildrenList(t);
  }

  function adaptToChildrenList(o) {
    if (childrenListMap[o[config.id]] !== null) {
      o[config.childrenList] = childrenListMap[o[config.id]];
    }
    if (o[config.childrenList]) {
      for (let c of o[config.childrenList]) {
        adaptToChildrenList(c);
      }
    }
  }
  return tree;
}

4. 完整演示Demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body></body>

<script>
  const data = [
    {
      id: 48,
      parentId: 47,
      workspaceName: '工藝計(jì)劃書合集',
      workspaceCode: 'A8-B1',
    },
    {
      id: 47,
      parentId: null,
      workspaceName: '工藝計(jì)劃書',
      workspaceCode: 'A8',
    },
    {
      id: 26,
      parentId: null,
      workspaceName: '0501DKD工作指導(dǎo)書',
      workspaceCode: 'A2',
    },
    {
      id: 29,
      parentId: 26,
      workspaceName: '月度計(jì)劃工藝包裝方案A',
      workspaceCode: 'A2-B1',
    },
    {
      id: 35,
      parentId: 26,
      workspaceName: '月度計(jì)劃工藝包裝方案B',
      workspaceCode: 'A2-B2',
    },
  ];

  function listToTree(data) {
    const map = new Map();
    const tree = [];

    data.forEach((p) => {
      p.children = [];
      map.set(p.id, p);
    });

    data.forEach((p) => {
      if (p.parentId !== null && map.has(p.parentId)) {
        map.get(p.parentId).children.push(p);
      } else {
        tree.push(p);
      }
    });

    return tree;
  }

  const result = listToTree(data);

  console.log('result:', result);
</script>

</html>

總結(jié)

到此這篇關(guān)于Vue將后端數(shù)據(jù)轉(zhuǎn)成樹形結(jié)構(gòu)的文章就介紹到這了,更多相關(guān)Vue后端數(shù)據(jù)轉(zhuǎn)成樹形結(jié)構(gòu)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: