开发中遇到的递归问题总结（数据的特点有个parentId,主要是把parentId相同的数据整合成tree的要求）

原创已于 2025-08-23 21:07:59 修改 · 342 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-08-10 09:46:19 首次发布

本文总结了在Vue.js项目中，利用ElementUI的Tree组件处理具有parentId特性的数据，将这些数据转换为树形结构的需求。在页面模板和数据处理方法中，详细阐述了如何整合并展示这些数据。

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

在vue项目中使用elementUI的tree处理后端返回的数据：数据的特点有个parentId,主要是把parentId相同的数据整合成tree的要求，然后把数据结构在页面中显示出来。

 function generateTree (origin, list) {
    let _tree = [] // 下一次递归用到的父节点列表
    let _arr = [] // 未匹配父节点的列表
    list.forEach(item => {
      let hadPush = false // 用于判断 item 是否已经成功匹配父节点
      origin.forEach(elem => {
        // 判断 id 和 parentId 的关系
        if (elem.id == item.parentId) { // 匹配父节点
          item.children = []
          elem.children.push(item) // 放入 tree
          _tree.push(item) // 放入父节点列表，下次递归用到
          hadPush = true
        }
      })
      // 未成功匹配父节点，放到 _arr
      !hadPush && _arr.push(item)
    })
    // 判断是否还有未匹配的节点，如果有，继续递归，如果没有，则退出递归
    if (_arr.length) {
      this.generateTree(_tree, _arr)
    }
  }

在vue页面中使用来处理数据：

       // 查询文件夹列表
        getFloderList (cb) {
          if (this.floderList && this.floderList.length) {
            cb.call(this, this.floderList)
          } else {
            collectApi.Getfolder().then(resp => {
              if (resp && resp.code == 200) {
                let tree = [] // 解析后的结果
                let _arr = [] // 第一次遍历剩余的数组
                resp.data.forEach((item, index) => {
                  if (item.parentId == 0) {
                    item.children = []
                    tree.push(item)
                    let obj = {
                      label: item.folderName,
                      id: item.id,
                      isleaf: false,
                      children:  generateTree(tree, _arr)
                    }
                  } else {
                    _arr.push(item)
                  }
                })
                generateTree(tree, _arr)
                this.floderList = tree
              } else {
                this.$message.error(resp.msg)
              }
            })
          }
        },

页面模板：

          <el-tree :data="floderList" :props="defaultProps" @node-click="handleNodeClick">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-Files"></use>
                </svg>{{ node.label }}
              </span>
            </span>
          </el-tree>

data里面定义的数据

          defaultProps: {
            children: 'children',
            label: 'folderName'
          },

方法里面定义：

        handleNodeClick (item) {
          this.floderList.forEach(i => {
            i.check = false
          })
          item.check = true
          this.currentFloder = item
          this.$set(this.floderList, item)
        },