Vue中HTML的table标签表格合并

<div id="app">
    <!-- 
      需求： 规格商品： 同一种商品可能有不同规格，需要将规格商品的'运费'和'名称'列在行方向上合并
     -->
   <table border="1" cellpadding="0" cellspacing="0">
     <thead>
       <tr>
        <th>商品名称</th>
        <th>商品编号</th>
        <th>商品规格</th>
        <th>商品单价</th>
        <th>商品数量</th>
        <th>运费</th>
      </tr>
     </thead>
     <tbody>
       <tr v-for="(item,index) in productList" :key="index">
         <td v-if="spanArr[index]" :rowspan="spanArr[index]" :colspan="1">{{item.name}}</td>
         <td>{{item.code}}</td>
         <td>{{item.attrs}}</td>
         <td>{{item.price}}</td>
         <td>{{item.num}}</td>
         <td v-if="spanArr[index]" :rowspan="spanArr[index]" :colspan="1">{{item.freight}}</td>
       </tr>
     </tbody>
   </table>
  </div>

<script>
    let vue = new Vue({
      el:'#app',
      data() {
        return {
          productList:[],
          spanArr: [],  //记录当前单元格向下合并的行数，为0的话说明该单元格在行方向上已被合并不用显示
          pos: 0  // 记录当前单元格所处的行下标
        }
      },
      methods: {
        // 初始化商品数据
        init() {
          this.productList = [
          {
              id: '0001',
              code: 'X10001',
              name:'葡萄',
              attrs:'红色；500g',
              price: 50,
              num: 1,
              freight: 15
            },
            {
              id: '0001',
              code: 'X10002',
              name:'葡萄',
              attrs:'绿色；500g',
              price: 30,
              num: 1,
              freight: 15
            },
            {
              id: '0001',
              code: 'X10003',
              name:'葡萄',
              attrs:'白色；500g',
              price: 30,
              num: 1,
              freight: 15
            },
            {
              id: '0002',
              code: 'X20001',
              name:'芒果',
              attrs:'黄色；500g',
              price: 50,
              num: 1,
              freight: 15
            }
          ]
          this.getRows()
        },
        // 初始化需要合并的数据数组,计算合并后需要展示的行数
        // 以数组中每条数据的商品id来判断，如果商品id相同说明是同一种商品的不同规格，则需要合并
        getRows() {
          let list = this.productList;
          list.forEach((ele,i)=>{
            if(i===0) {
              // 第一行，一定展示不需要合并
              this.spanArr.push(1)
              this.pos = 0;
            }else {
              // 非第一行
              if(ele.id === list[i-1].id) {
                // 当前行的id和上一行的id相同了，则当前行需要和上一行的进行合并,当前行的该单元格不显示
                this.spanArr[this.pos] +=1        //需要向下合并的行数加1
                this.spanArr.push(0)
              }else {
                this.spanArr.push(1)
                this.pos = i
              }
            }
          })
          console.log('合并的数据',this.spanArr);
        }
      },
      created() {
        this.init()
      },
    })
</script> 

合并后的表格效果如下图所示：