如何使用 v-for 使用 vue.js 渲染表格 [英] How to use v-for to render a table using vue.js
本文介绍了如何使用 v-for 使用 vue.js 渲染表格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个看起来像这样的数组:
sales = [[{'Year': 2018, 'Month': 01, 'Sale';512}, {'Year': 2018, 'Month': 02, 'Sale';1025}, ....],[{'Year': 2017, 'Month': 01, 'Sale';155}, {'Year': 2017, 'Month': 02, 'Sale';12}, ....]]
我想使用 vue 在表格中显示它:
<头><tr><th>#</th><th>2018</th><th>2017</th></tr></thead><tr v-for="(sale,i) in sales" :key="i"><th scope="row">{{ ???}}</th>//月<td>{{ ???}}</td>//当前年份.销售<td>{{ ???}}</td>//上一年.销售</tr></tbody>
不幸的是,我不知道如何遍历我的销售数组以显示在当前年份和上一年的每个表行销售中.
解决方案
<table class="table table-striped"><头><tr><th>#</th><th>2018</th><th>2017</th></tr></thead><tr v-for="(sale,i) in sales[0]" :key="i"><th scope="row">{{ sale.Month }}</th><td>{{ sale.Sale }}</td><td>{{ sales[1][i].Sale }}</td></tr></tbody>新的 Vue({el: "#app",数据: {销售量: [[{'Year': 2018, 'Month': 01, 'Sale': 512}, {'Year': 2018, 'Month': 02, 'Sale': 1025}],[{'Year': 2017, 'Month': 01, 'Sale': 155}, {'Year': 2017, 'Month': 02, 'Sale': 12}]]}})
示例 https://jsfiddle.net/mcqwtdgr/
I've an array that look like this:
sales = [
[{'Year': 2018, 'Month': 01, 'Sale'; 512}, {'Year': 2018, 'Month': 02, 'Sale'; 1025}, ....],
[{'Year': 2017, 'Month': 01, 'Sale'; 155}, {'Year': 2017, 'Month': 02, 'Sale'; 12}, ....]
]
i would like to show it in a table using vue:
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>2018</th>
<th>2017</th>
</tr>
</thead>
<tbody>
<tr v-for="(sale,i) in sales" :key="i">
<th scope="row">{{ ??? }}</th> //Month
<td>{{ ??? }}</td> //currentYear.Sale
<td>{{ ??? }}</td> //previousYear.Sale
</tr>
</tbody>
</table>
unfortunately i don't know how to iterate through my sales array to show in every table row sale of the current year and the previous year.
解决方案 <div id="app">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>2018</th>
<th>2017</th>
</tr>
</thead>
<tbody>
<tr v-for="(sale,i) in sales[0]" :key="i">
<th scope="row">{{ sale.Month }}</th>
<td>{{ sale.Sale }}</td>
<td>{{ sales[1][i].Sale }}</td>
</tr>
</tbody>
</table>
</div>
new Vue({
el: "#app",
data: {
sales: [
[{'Year': 2018, 'Month': 01, 'Sale': 512}, {'Year': 2018, 'Month': 02, 'Sale': 1025}],
[{'Year': 2017, 'Month': 01, 'Sale': 155}, {'Year': 2017, 'Month': 02, 'Sale': 12}]
]
}
})
example https://jsfiddle.net/mcqwtdgr/
这篇关于如何使用 v-for 使用 vue.js 渲染表格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆