前端树形结构渲染成横向excel格式

Question

一 树形json

const treeJson = [
  {
    id: 1,
    name: '1',
    children: [
      {
        id: 11,
        name: '1-1',
        children: [
          {
            id: 111,
            name: '1-1-1',
            children: [
              {
                id: 1111,
                name: '1-1-1-1',
                children: []
              },
              {
                id: 1112,
                name: '1-1-1-2',
                children: []
              },
              {
                id: 1113,
                name: '1-1-1-3',
                children: []
              }
            ]
          },
          {
            id: 112,
            name: '1-1-2',
            children: [
              {
                id: 1121,
                name: '1-1-2-1',
                children: []
              },
              {
                id: 1122,
                name: '1-1-2-2',
                children: []
              },
              {
                id: 1123,
                name: '1-1-2-3',
                children: []
              },
              {
                id: 1124,
                name: '1-1-2-4',
                children: []
              }
            ]
          }
        ]
      },
      {
        id: 12,
        name: '1-2',
        children: [
          {
            id: 121,
            name: '1-2-1',
            children: [
              {
                id: 1211,
                name: '1-2-1-1',
                children: []
              },
              {
                id: 1212,
                name: '1-2-1-2',
                children: []
              },
              {
                id: 1213,
                name: '1-2-1-3',
                children: []
              },
            ]
          }
        ]
      }
    ]
  },
  {
    id: 2,
    name: '2',
    // children:[...]
  }
]

二 将要渲染成的excel（目前使用的row和col）

能看出来吧，就是横向的渲染

三 问题不是能不能渲染出内容而是高度也就是合并单元格的每一级的高度

（第四级的个数，暂定为一个单元格高1，决定第三级的高度，第三级高度和决定第二级高度，以此类推，第一级高度就是所有第四级的高度和，也就是说高度是倒推而来的，然而这种树形结构遍历不论深度还是广度都是正向的。。。）
所以先不考虑动态多级渲染，就先考虑只有四级树，那么不考虑高度我可以把每一级要渲染的内容遍历最终合并组装成平面结构，问题就在于这个高度倒推怎么算。。。我实在是没找到好的方法，想到的一个方法深度遍历，那么第三级也就是 1-1-1 ， 1-1-2 ， 1-1-3这层遍历的时候可以根据第四级的children的length来知道，也就是1-1-1这个单元格内容高度是3（因为他的children的length是3，因为这个children是最后一层），1-1-2 单元格高度是4，可以看到第三级可以这么办，但是第二级呢，1-1单元格的高度如果也按照他的子级children的length来定那就是2（这是不对的因为没有考虑到第三级的高度是第四级来定的，所以这样子就没办法通过一个好的算法来确定每一级的高度- -，哎我是没找到倒叙的方法来一步到位，之前也想到了引用对象的方式来弄但也只有个想法）
所以大佬们有什么算法可以一次搞定每一层单元格的真实高度

回复不知道怎么贴图所以此地方是用来回答madRain的问题的

Answer 1

递归获取节点层级及本身信息，将树同级节点放入同一个数组，代表一个列。
按楼主示例，则递归可得到以下结果：

[
    [1,2],
    [1-1, 1-2, ...],
    [1-1-1, 1-1-2, ...],
    [1-1-1-1, 1-1-1-2, ...],
]

然后从最后一列往前设置Excel即可，从后往前可以知道对应父级单元格的实际高度。

Answer 2

table-cell 类型的元素设置 rowspan 属性大于至少一个同行 table-cell 的时候，会占用下一行同列的单元格的位置，效果等同于 excel 的纵向合并单元格，举个栗子：

<style>
    td{border: solid}
</style>
<table>
<thead>
<tr>
    <th>标题1</th><th>标题2</th>
</tr>
</thead>
<tbody>
<tr>
    <td rowspan="10">1</td><td>1-1</td>
</tr>
<tr>
    <td>1-2</td>
</tr>
</tbody>
</table>

其效果：
。

Answer 3

可以贴一下完整代码吗