我正在学习Vue JS。 我想创建一个组件,用于显示数据表格,并可以在其他组件中重复使用。我有两个props:items(数据)和columns(列名)
items: [
{
'id':'1',
'title': 'hello',
'description': 'ok ok',
'created_date': '2018-09-09'
},
{
'id':'2',
'title': 'hello 2',
'description': 'ok ok 2',
'created_date': '2018-10-09'
}
],
columns: [ 'id', 'title', 'description', 'created_date']
我想创建一个如下所示的表格
<table class="table">
<thead>
<tr>
<th v-for="(column, index) in columns" :key="index"> {{column}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in items" :key="index">
<td v-for="(column, indexColumn) in columns" :key="indexColumn">{{item.$column}}</td>
</tr>
</tbody>
我不知道如何通过列名从项目中获取值。是否有可能创建这样的表格?
Object.keys
来获取列,而不是传递两个 props,代码如下:<th v-for="(column, index) in Object.keys(items)" :key="index">{{column}}</th>
- maxshuty