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>複製代碼

實現效果以下圖：

完畢！