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

blueSky-fan

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

阅读量280

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/lff18277233091/article/details/126260204

版权

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

摘要由CSDN通过智能技术生成

在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
        }