[英]vue.js render table with rowspans
我是vue.js的新手,我找不到使用vue将以下数据呈现到具有rowpans的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
我们如何用这种数据渲染这种表?
这应该可以解决问题:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.