vue数组转成树结构-前端问答-PHP中文网

vue数组转成树结构

王林

发布： 2023-05-24 10:42:37

原创

695人浏览过

vue是一款流行的前端框架，其中很多操作都是基于数组进行的。当我们需要在vue中展示复杂的树形结构数据时，我们需要将数组转换为树结构数据，以方便我们在页面上展示和操作。本文将介绍vue数组转换为树结构的实现方法。

确定数据结构

在进行转换前，我们需要先确定我们要转换的数据结构，本文以以下数据结构为例：

let dataArray = [
  { id: 1, name: 'parent1', parentId: 0 },
  { id: 2, name: 'parent2', parentId: 0 },
  { id: 3, name: 'child1', parentId: 1 },
  { id: 4, name: 'child2', parentId: 1 },
  { id: 5, name: 'child3', parentId: 2 },
  { id: 6, name: 'grandchild1', parentId: 3 },
  { id: 7, name: 'grandchild2', parentId: 3 }
];

登录后复制

其中，每个元素包含一个id，名称和其父元素的id。这个数据结构可以用来表示一个有父子关系的树形结构。

实现转换方法

接下来，我们需要实现一个转换方法。根据我们的数据结构，我们可以定义一个节点类：

class Node{
  constructor(data){
    this.id = data.id;
    this.name = data.name;
    this.parentId = data.parentId;
    this.children = [];
  }
}

登录后复制

其中，id、name、parentId表示节点的id、名称以及父节点的id，children表示该节点下的子节点集合。

立即学习“前端免费学习笔记（深入）”；

接着，我们在根据原始数组，创建根节点：

function buildTree(dataArray) {
  let root = new Node({ id: 0, name: 'root', parentId: null });
  
  // 循环处理每个节点
  for(let i=0;i<dataArray.length;i++){
      let data = dataArray[i];
      let node = new Node(data);
  
      // 添加到父节点下
      let parent = findNode(root, data.parentId);
      parent.children.push(node);
  }
  return root.children;
}

// 根据id查找节点
function findNode(node, targetId) {
  if (node.id === targetId) {
      return node;
  } else {
      for (let i = 0; i < node.children.length; i++) {
          let result = findNode(node.children[i], targetId);
          if (result !== null) {
              return result;
          }
      }
      return null;
  }
}

登录后复制

在buildTree方法中，我们首先创建一个根节点，然后我们循环遍历dataArray，创建每个节点，并将其添加到其父节点的children属性中。

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

findNode方法用于查找指定id的节点，当我们在循环时遇到该节点时，我们将其添加到其父节点的children属性中。

测试结果

我们现在可以测试一下我们的方法：

let treeData = buildTree(dataArray);

console.log(JSON.stringify(treeData));

登录后复制

输出结果如下：

[
  {
    "id": 1,
    "name": "parent1",
    "parentId": 0,
    "children": [
      {
        "id": 3,
        "name": "child1",
        "parentId": 1,
        "children": [
          {
            "id": 6,
            "name": "grandchild1",
            "parentId": 3,
            "children": []
          },
          {
            "id": 7,
            "name": "grandchild2",
            "parentId": 3,
            "children": []
          }
        ]
      },
      {
        "id": 4,
        "name": "child2",
        "parentId": 1,
        "children": []
      }
    ]
  },
  {
    "id": 2,
    "name": "parent2",
    "parentId": 0,
    "children": [
      {
        "id": 5,
        "name": "child3",
        "parentId": 2,
        "children": []
      }
    ]
  }
]

登录后复制

我们可以看到，我们成功将原始数组转换为树形结构数据。

总结

在Vue中，很多操作都离不开数组，当我们需要展示复杂的树形结构数据时，我们可以将数组转换为树结构数据。本文介绍了Vue数组转换为树结构的实现方法，首先确定了数据结构，然后实现了转换方法，最后我们进行了测试，得出了正确的结果。您可以根据这个方法，来转换您的Vue数组数据，以便在页面上方便地展示和操作。

以上就是vue数组转成树结构的详细内容，更多请关注php中文网其它相关文章！