vue 合并表格行

版权声明：本文为QQ帝国原创博客，非经本人同意，且勿转载。。 https://blog.csdn.net/QQ_Empire/article/details/84674910

 模板结构

<template v-for="item in dataList" >
    
        <tr >
            <!-- 左标题 -->
            <td :rowspan="item.pdate.length">{{item.pname}}</td>
            <!-- 第一行 -->
            <td>{{item.pdate[0].ptvalue}}</td>
            <td>{{item.pdate[0].tiaoxingma}}</td>
            <td>{{item.pdate[0].skutitle}}</td>
            <td>{{item.pdate[0].skuzong}}</td>
        </tr>
        <tr v-for="son in item.pdate.length-1" >
            <!-- 遍历第一行数据 -->
            <td >{{item.pdate[son].ptvalue}}</td>
            <td >{{item.pdate[son].tiaoxingma}}</td>
            <td >{{item.pdate[son].skutitle}}</td>
            <td >{{item.pdate[son].skuzong}}</td>
        </tr>
        <!-- <tr></tr> -->
    </template>

 数据结构

dataList: [
          {
            "pid": "1111",
            "pname": "红色",
            "pdate": [
              {
                "ptid": "sadasd",
                "ptvalue": "1",
                "tiaoxingma":"条形码1",
                 "suu":"sku",
                 "skutitle":"skutitle",
                 "skuzong":"skuzong",
              },
              {
                "ptid": "1239977",
                "ptvalue": "bb",
                "tiaoxingma":"条形码2",
                "suu":"sku",
                 "skutitle":"skutitle",
                 "skuzong":"skuzong",
              }
              ,
              {
                "ptid": "1239977",
                "ptvalue": "3",
                "tiaoxingma":"条形码3",
                "suu":"sku",
                 "skutitle":"skutitle",
                 "skuzong":"skuzong",
              }
            ]
          },
          {
            "pid": "2222",
            "pname": "蓝色",
            "pdate": [
              {
                "ptid": "sadasd",
                "ptvalue": "11",
                "tiaoxingma":"条形码3",
                "suu":"sku",
                 "skutitle":"skutitle",
                 "skuzong":"skuzong",
              },
              {
                "ptid": "1239977",
                "ptvalue": "b",
                "tiaoxingma":"条形码3",
                "suu":"sku",
                 "skutitle":"skutitle",
                 "skuzong":"skuzong",
              },
              {
                "ptid": "1239977",
                "ptvalue": "33",
                "tiaoxingma":"条形码3",
                "suu":"sku",
                 "skutitle":"skutitle",
                 "skuzong":"skuzong",
              }
              ,
              {
                "ptid": "1239977",
                "ptvalue": "44",
                "tiaoxingma":"条形码3",
                "suu":"sku",
                 "skutitle":"skutitle",
                 "skuzong":"skuzong",
              }
              ,
              {
                "ptid": "1239977",
                "ptvalue": "55",
                "tiaoxingma":"条形码3",
                "suu":"sku",
                 "skutitle":"skutitle",
                 "skuzong":"skuzong",
              }
            ]
          }
        ]

 效果图