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

平铺数据获取树形数据

后端返回的是一维数组,我们使用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' }
  }
}

版权声明:本文为h_123456___原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。