关于table 动态合并行的小问题

Question

<table border="0" cellspacing="1" cellpadding="0" width="100%">
  <thead>
    <th width="110">类型</th>
    <th width="110">名称</th>
    <th width="110">数量</th>
    <th width="110">价格</th>
  </thead>
  <tbody>
    <tr v-for="(item, index) in list" :key="index">
      <td>{{item.type}}</td>
      <td>{{item.name}}</td>
      <td>{{item.number}}</td>
      <td>{{item.price}}</td>
    </tr>
  </tbody>
</table>


 data() {
        return {
          list : [
            { type: '品种1', name: '苹果', number: 10, price: 200},
            { type: '品种1', name: '香蕉', number: 20, price: 300},
            { type: '品种1', name: '总计', number: 30, price: 500},
            { type: '品种2', name: '白菜', number: 10, price: 500},
            { type: '品种2', name: '番茄', number: 20, price: 500},
            { type: '品种2', name: '总计', number: 30, price: 500},
          ],
         rows = [
            {row: 0,rowspan: 3},
            {row: 3,rowspan: 3}
          ]
        }
      }

根据上面的循环绑定，是没有进行合并行的。， 现在需要进行行的合并： 结果如图

具体合并的行数，根据rows的数据来， 类型1， 从索引（row = 0）第0行开始，合并 （rowspan = 3）3行， 类型2 从索引 row = 3）3开始， 合并（rowspan = 3） 3行， 请教一下： 在tr 循环时，如何去绑定 rowspan, 非常感谢！

Answer 1

在td渲染的时候，需要让它带有两个属性值，rowspan和display来控制每一个单元格的合并行数和是否显示，这样就可以进行动态合并行了。