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

<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}
          ]
        }
      }

根据上面的循环绑定,是没有进行合并行的。, 现在需要进行行的合并: 结果如图
image.png
具体合并的行数,根据rows的数据来, 类型1, 从索引(row = 0)第0行开始,合并 (rowspan = 3)3行, 类型2 从索引 row = 3)3开始, 合并(rowspan = 3) 3行, 请教一下: 在tr 循环时,如何去绑定 rowspan, 非常感谢!

阅读 120
评论
    1 个回答

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

      撰写回答

      登录后参与交流、获取后续更新提醒