vue.js 使用行跨度渲染表

Question

我是 vue.js 的新手，我找不到使用 vue 将以下数据呈现到具有行跨度的 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>