vue中table跨行合并（demo）

今天分了一个任务给新来的前端小姑娘，小姑娘拿到高保真有点犯难，主要是因为要实现表格的跨行合并单元格，这个时候一贯使用的iview中的table组件就不灵了，写原生的表格去实现她又不太会，没办法只能写个demo让她自己再研究研究吧。废话不多说，直接上代码

<template>
    <div>
     <table>
      <thead>
        <th>row01</th>
        <th>row02</th>
        <th>row03</th>
        <th>row04</th>
      </thead>
      <tbody>
        <template v-for="(item,index) in tableData">
          <tr :key="index">
            <td :rowspan="item.rowSpanData.length">{{item.rowSpanName}}</td>
            <td >{{item.rowSpanData[0].value01}}</td>
            <td >{{item.rowSpanData[0].value02}}</td>
            <td >{{item.rowSpanData[0].value03}}</td>
          </tr>
          <tr v-for="(ele,inx) in item.rowSpanData.length-1" :key="index+'-'+inx">
            <td>{{item.rowSpanData[ele].value01}}</td>
            <td>{{item.rowSpanData[ele].value02}}</td>
            <td>{{item.rowSpanData[ele].value03}}</td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>
<script>
export default
 {
  data() {
    return {
      tableData: [
        {
          rowSpanName: "合并单元格01",
          rowSpanData: [
            {
              value01: "01",
              value02: "02",
              value03: "03"
            },
            {
              value01: "01",
              value02: "02",
              value03: "03" 
            },
            {
              value01: "01",
              value02: "02",
              value03: "03"
            }
          ]
        },
        {
          rowSpanName: "合并单元格02",
          rowSpanData: [
            {
              value01: "01",
              value02: "02",
              value03: "03"
            },
            {
              value01: "01",
              value02: "02",
              value03: "03"
            },
            {
              value01: "01",
              value02: "02",
              value03: "03"
            },
            {
              value01: "01",
              value02: "02",
              value03: "03"
            }
          ]
        },
        {
          rowSpanName: "合并单元格03",
          rowSpanData: [
            {
              value01: "01",
              value02: "02",
              value03: "03"
            },
            {
              value01: "01",
              value02: "02",
              value03: "03"
            }
          ]
        }
      ]
    };
  }};
</script>
<style scoped>
table {
  width: 600px;
  border: 1px solid #ccc;
  border-collapse: collapse;
}
thead th{
    text-align: left;
    background-color: #fafafa;
}
th,td {
  padding-left: 20px;
  border: 1px solid #e9eaec;
  line-height: 30px;
}
</style>

实现效果如下图：

完毕！