vue.js渲染rowspans表

Question

我是新来vue.js，我无法找到一个方法来呈现以下数据使用VUE rowspans一个HTML表格。

{
   "title":"Monthly Sales",
   "monthlySales":[
      {
         "product":"P123",
         "months":[
            {
               "month":"January",
               "unitPrice":"$80",
               "unitsSold":2200
            },
            {
               "month":"February",
               "unitPrice":"$82",
               "unitsSold":1900
            },
            {
               "month":"March",
               "unitPrice":"$81",
               "unitsSold":1800
            }
         ]
      },
      {
         "product":"Q456",
         "months":[
            {
               "month":"January",
               "unitPrice":"$20",
               "unitsSold":200
            },
            {
               "month":"February",
               "unitPrice":"$22",
               "unitsSold":100
            }
         ]
      }
   ]
}

我想创造一个像这样的输出：http://jsbin.com/hucufezayu/edit?html,output

我们怎样才能使这种表的这个数据？

Answer 1

这应该做的伎俩：

<template>
  <div id="app">
    <table border="1" style="border-collapse: collapse">
      <thead>
      <th>Product</th>
      <th>Month</th>
      <th>Unit price</th>
      <th>No. sold</th>
      </thead>
      <tbody>
      <template v-for="mSale in salesData.monthlySales">
        <tr v-for="(month, key) in mSale.months">
          <td v-if="key == 0" :rowspan="mSale.months.length">    {{mSale.product}}</td>
          <td>{{month.month}}</td>
          <td>{{month.unitPrice}}</td>
          <td>{{month.unitsSold}}</td>
        </tr>
      </template>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        salesData: jsonData
      }
    }
  }
</script>