递归常用方法

1、后端一次性返回所有树节点的数据,如何进行优雅的渲染呢?

例如后端返回的是这样的数据:
image.png

这个时候我们就要根据pid === id来进行树结构的分类

    resetTree (val) {
      let list = val || []
      let result = []
      let hashTable = {}
      for (let i = 0; i < list.length; i++) {
        let label = list[i]
        let id = parseInt(label.id)
        let parentId = parseInt(label.pId)

        hashTable[id] = label
        label.children = []

        if (parentId === 0) {
          result.push(label)
        } else {
          let parent = hashTable[parentId]
          if (!parent) {
            console.log('这个label找不到父级', label.id)
          }
          parent && parent.children.push(label)
        }
        this.setTree(result)
      }
    }
  /*
    通过这个方法就可以把数据转变成正常的树形的结构数据
   这个时候还需对字段进行替换就需用到递归替换
 */
    setTree (val) {
      let item = []
      val.map((list, i) => {
        let newData = {}
        newData.label = list.resName
        newData.id = list.resId
        newData.pId = list.parentResId
        newData.is_show_add = false
        newData.is_show_del = false
        newData.children = list.subResList ? this.setTree(list.subResList) : []
        item.push(newData)
      })
      this.treeList = item
      return item
    }
   通过这个方法就可以把字段替换成 ui框架对应的渲染字段
   这个也是一个常见的递归方法
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 简介浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工 作原理,我们将看到,从你在地址栏输入google.c...
    听风阁阅读 3,428评论 0 7
  • 前端必读:浏览器内部工作原理[https://kb.cnblogs.com/page/129756/] 作者: T...
    我是强强阅读 1,265评论 0 2
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,804评论 1 32
  • 转载说明 一、介绍 浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工作原理,我们将看到,从你在地址栏输入g...
    17碎那年阅读 2,538评论 0 22
  • 2018.6.21 周四 今天有位老师休息。另一位老师上午排满了课。于是我给孩子们当了一回老师。 本来一直小时候的...
    LoveVicky阅读 159评论 0 0

友情链接更多精彩内容