vue前端列表list转树tree及树转列表list

原创于 2021-12-08 14:38:35 发布 · 2.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#list #数据结构 #链表 #前端 #vue.js

前端同时被 2 个专栏收录

2 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

本文分享了如何使用JavaScript实现列表转换为树形结构（list转tree）和树形结构回转为列表（tree转list）的方法，适合初学者理解数据结构操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在网上找了很多，都不太适用，于是自己寻求大佬帮助，记录一下

一、list转tree

let arr = []
function tree_init(data, arr) {
  data.forEach(ele => {
    if (!ele.pid) {
      arr.push({
        id: ele.id,
        name: ele.name,
        children: []
      })
    } else {
      tree(ele, arr)
    }
  })
  console.log(arr)
}
function tree(data, arr) {
  arr.forEach(ele => {
    if (ele.id === data.pid) {
      ele.children.push({
        id: data.id,
        name: data.name,
        children: []
      })
    } else {
      tree(data, ele.children)
    }
  })
}

二、tree转list

这里this.list是外部写好的

this.list = []

这里设置tree[i] = null是为了用element的级联选择器

buildList(tree) {
  for (let i in tree) {
    this.list.push(tree[i])
    if (tree[i].children.length !== 0) {
      this.buildList(tree[i].children)
    } else {
      tree[i].children = null
    }
  }
}