vue3一维数组转树形结构

在Vue3中，将一维数组转换成树形结构通常用于构建数据组件，比如菜单、目录列表等。这需要通过递归和一些额外的数据处理。以下是一个基本的步骤：

1. 首先，你需要一个数据源，它是一维数组，每个元素包含一个标识（通常是`id`）和可能的`parentId`字段。

const flatData = [
  { id: '1', name: '根节点1', parentId: null },
  { id: '2', name: '子节点1', parentId: '1' },
  { id: '3', name: '子节点2', parentId: '1' },
  { id: '4', name: '根节点2', parentId: null },
];

2. 创建一个函数，接受一维数组作为输入，返回一个处理过的树形结构数组。可以利用`reduce`遍历数组，同时维护一个已知节点的集合。

function flattenArrayToTree(flatData) {
  const treeData = [];
  
  function buildTree(item) {
    if (!item.parentId) {
      treeData.push({ ...item, children: [] });
    } else {
      let parentIndex = treeData.findIndex(treeItem => treeItem.id === item.parentId);
      if (parentIndex !== -1) {
        treeData[parentIndex].children.push(item);
      } else {
        console.error('Parent not found:', item.parentId);
      }
    }
  }

  flatData.forEach(buildTree);

  return treeData;
}

// 使用该函数
const treeData = flattenArrayToTree(flatData);