JS: 树形结构转表格显示

典型的树形结构转表格显示时，需要考虑行列合并的问题。
原理：先将树形结构转成平面的二维度数组，然后借助每个元素的层级关系判断行列合并。

示例。

代码

const convert = (data) => {
  // 扁平化
  const flatten = (d , ret = [] , parentLv = [] , parentData = []) => {
    d.forEach((i , idx) => {
      let currentLv = [...parentLv,idx]
      let currentData = [...parentData,i]
      if(i.children){
        flatten(i.children , ret , currentLv , currentData)
      }else{
        ret.push([currentLv , currentData])
      }
    })

    return ret
  }

  //在mat的col列row行开始 向列方向查找 与 v 不同的值
  const diffValue = (mat , col, v , row = 0) => {
    for(let i = row ; i < mat.length; i++){
      if(mat[i][col] != v) return i
    }
    return mat.length
  }


  let flatData = flatten(data)

  let lv = flatData.map( i => i[0] )

  let newdata = flatData.map( i => i[1] )

  //最大列数
  let cols = lv.reduce((t,c)=>( Math.max(t , c.length)) , 1)

  let rows = lv.length

  let ret = []
  //行合并
  for(let i = 0 ; i < rows; i++){
    let l = lv[i].length
    ret[i] = []
    for(let j = 0; j < cols; j++){
      let v = 0
      if(j < l - 1){
        v = 1
      }
      else if(j == l-1){
        v = cols - l + 1
      }
      else if(j >= l){
        lv[i][j] = -1
        v = 0
      }

      ret[i][j] = { colspan : v , data:newdata[i][j] }
    }
  }
  //列合并
  for(let i = 0 ; i < cols; i++){
    for(let j = 0; j < rows; ){
      let c = lv[j][i]
      let v = 0
      if(c == -1){
        v = 0
        ret[j][i].rowspan = 0
        j++
      }else{
        let kl = diffValue(lv , i , c , j)
        for(let k = j; k < kl; k++){
          ret[k][i].rowspan = k == j ? (kl - k) : 0
        }
        j = kl
      }

    }
  }
  return ret
}