平铺数据获取树形数据的方法、树形数据排序方法

hjt_未来可期

已于 2023-03-20 10:38:43 修改

阅读量484

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript

于 2023-01-16 11:29:59 首次发布

本文链接：https://blog.youkuaiyun.com/h_123456___/article/details/128701322

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

该文章介绍了如何处理从后端获取的一维数组，将其转换为用于前端组件如el-tree的树形数据结构。同时，它还提供了一个方法来对树形数据进行排序，特别考虑了同级别和子级别的排序规则，确保了树结构的正确性。

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

平铺数据获取树形数据

后端返回的是一维数组，我们使用el-tree或者其他组件的时候，需要用到树形数据

/**
* 参数list：后端接口返回的数组
* 参数key：当前行对应的id
* 参数parentKey：当前行对应的父元素的id
*/
getTrees (list, key, parentKey) {
  const parentObj = {}
  list.forEach(o => {
    parentObj[o[key]] = o
  })
   return list.filter(o => {
     return !parentObj[o[parentKey]]
   }).map(o => {
     o.children = o.children || []
     o.children.push(...getTrees(list, key, parentKey, o[key]))
     return o
   })
}

树形数据排序

树形数据排序的时候，和普通表格不一样的地方在于树形排序要做的是：树形数据排序需要同级别先排序，同一父级下子级排序，不能像普通表格一样按照每一行数据排序

/**
*参数array：需要排序的数组
* 参数key：根据哪个字段排序
* type：升序/降序 ascending / descending
*/
sortByKey (array, key, type = 'descending') {
  return array.sort(function (a, b) {
    let x, y
    if (type === 'descending') {
      x = b[key]
      y = a[key]
    } else {
      x = a[key]
      y = b[key]
    }
    if (a.children) {
      sortByKey(a.children, key, type)
    }
    if (b.children) {
      sortByKey(b.children, key, type)
    }
    return compare(x, y)
  })
}
compare (a, b) {
  if (!isNaN(Number(a)) && !isNaN(Number(b))) {
    return Number(a) - Number(b)
  } else {
    if (!a && b) return -1
    if (!a && !b) return 0
    if (a && !b) return 1
    return a.toString().localeCompare(b, 'zh-Hans-CN')
    // , { sensitivity: 'accent' }
  }
}