多层嵌套动态合并单元格

写出这个问题，是因为遇到两位小伙伴都在这个问题卡住了。多层嵌套就不能用单层数据合并单元格的思路来解决。

UI展示

数据结构

{
    form: {
        cost_control: {
            children: [{
                assess_score: "10.00",
                id: 93,
                name: "费用预估与预算偏差控制在10%以内（业主方、使用方原因变化除外）费用预估与预算偏差控制在10%以内（业主方、使用方原因变化除外）",
                project_id: 89,
                remarks: "费用预估与预算偏差控制在10%以内（业主方、使用方原因变化除外）费用预估与预算偏差控制在10%以内（业主方、使用方原因变化除外",
                score: "100.00",
                status: 1,
                type: "cost_control",
                weight: "10%"
            },
            {
                assess_score: "10.00",
                id: 94,
                name: "费用预估与预算偏差控制在10%以内（业主方、使用方原因变化除外）费用预估与预算偏差控制在10%以内（业主方、使用方原因变化除外）",
                project_id: 89,
                remarks: "费用预估与预算偏差控制在10%以内（业主方、使用方原因变化除外）费用预估与预算偏差控制在10%以内（业主方、使用方原因变化除外",
                score: "100.00",
                status: 1,
                type: "cost_control",
                weight: "10%"
            },
            ......
            ],
            name: 'aaaa', // 阶段
            weight_count: '30.00%' // 阶段权重
        },
        progress_control: {
            children: [{
                assess_score: "10.00",
                id: 100,
                name: "费用预估与预算偏差控制在10%以内（业主方、使用方原因变化除外）费用预估与预算偏差控制在10%以内（业主方、使用方原因变化除外）",
                project_id: 89,
                remarks: "费用预估与预算偏差控制在10%以内（业主方、使用方原因变化除外）费用预估与预算偏差控制在10%以内（业主方、使用方原因变化除外",
                score: "100.00",
                status: 1,
                type: "cost_control",
                weight: "10%"
            },
            {
                assess_score: "10.00",
                id: 101,
                name: "费用预估与预算偏差控制在10%以内（业主方、使用方原因变化除外）费用预估与预算偏差控制在10%以内（业主方、使用方原因变化除外）",
                project_id: 89,
                remarks: "费用预估与预算偏差控制在10%以内（业主方、使用方原因变化除外）费用预估与预算偏差控制在10%以内（业主方、使用方原因变化除外",
                score: "100.00",
                status: 1,
                type: "cost_control",
                weight: "10%"
            },
            ......
            ],
            name: 'bbbb', // 阶段
            weight_count: '35.00%' // 阶段权重
        }
    }
}

思路

主要就是要先在tbody上遍历 form 子节点的每一项，然后先遍历第二层数据的第一行，进行对应单元格的合并，之后再从第二行开始遍历具体每一项(注意索引的变化)。代码如下：

<table>
  <tbody>
    <tr>
      <td class="td-bgc">阶段</td>
      <td class="td-bgc">序号</td>
      <td class="td-bgc" width="200">评分描述</td>
      <td class="td-bgc">阶段权重</td>
      <td class="td-bgc">合格/不合格</td>
      <td class="td-bgc">权重%</td>
      <td class="td-bgc">得分</td>
      <td class="td-bgc">评分</td>
      <td class="td-bgc">备注(选填)</td>
    </tr>
  </tbody>
  <!-- 遍历form数据的每一项 -->
  <tbody v-for="(item, key,index) in form" :key="index">
    <!-- 先遍历第一行 -->
    <tr>
      <td class="td-bgc" :rowspan="item.children.length">{{item.name}}</td>
      <td>{{1}}</td>
      <td>{{item.children[0].name}}</td>
      <td :rowspan="item.children.length">{{item.weight_count}}</td>
      <td>合格/不合格</td>
      <td>{{item.children[0].weight}}</td>
      <td>{{item.children[0].assess_score}}
      <td>{{item.children[0].score}}</td>
      <td>描述</td>
    </tr>
    <!-- 从第二行开始遍历 -->
    <tr v-for="(child,c_index) in item.children.length - 1" :key="c_index">
      <td>{{c_index+2}}</td> 
      <td>{{item.children[child].name}}</td> 
      <td>合格/不合格</td>
      <td>{{item.children[child].weight}}</td> 
      <td>{{item.children[child].assess_score}}</td>
      <td>{{item.children[child].score}}</td> 
      <td class="td-bgc">备注(选填)</td>
    </tr>
  </tbody>
</table>