html table :rowspan 动态确定合并行的方法 求解

html table :rowspan 动态合并行的方法 求解

                  <tr v-for="i in item.data" :key="i">
                         ** 下面这句，我这要根据数据长度 （即行数），来确定 第一列合并的多少行。
                          问题 是，我增加一行时，列也增加了，   问题在这个 :rowspan  ，for后每行都有rowspan,  有什么办法处理？？**
                      <td :rowspan="item.data.length">{{item.name}}</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td>
                          <span style="font-size: 16px;">
                            <el-icon @click="addTestData(item)"><CirclePlus /></el-icon>   增加数据  item.data.push()来 增加行
                            <el-icon @click="deleteTestData(item)" ><CircleClose /></el-icon>   减少数据 item.data.pop() 来 减少行
                          </span> 
                      </td>
                    </tr>

加一个判断,判断是第一列，index是下标

<td v-if="index===0" :rowspan="item.data.length">{{item.name}}</td>
<td v-else >{{item.name}}</td>

<td rowspan="item.data.length">{{item.name}}</td>

修改为

<td v-if="index==0" rowspan="item.data.length">{{item.name}}</td>

实现思路就是，在循环的时候进行一下判断，如果是第一次的话就进行合并，第二次及之后，就不合并了
另外因为是纵向合并单元格，所以不要加else