Vue类星体q-table用于数组中的多个数组

Question

我目前正试图根据API的响应显示一个具有动态列数的表。

这是一个API响应的例子，我有(在dataExportColumnsTagList元素的数量可以从1到许多…对于这个例子，我放了3个元素):

allData:[
{
"id": 167831,
"tag": "House1",
"timestamp": "2020-12-17T00:00:00",
"dataExportColumnsTagList": [
{
"element_tag": "PROD_ELEMENT",
"display_unit_tag": "Gram",
"value": 23,
"index": 1
},
{
"element_tag": "PROD_A",
"display_unit_tag": "Day",
"value": 5,
"index": 0
},
{
"element_tag": "PROD_T",
"display_unit_tag": "Degree Celsius",
"value": 25,
"index": 0
}
]
},
{
"id": 167834,
"tag": "House1",
"timestamp": "2020-12-17T03:10:19",
"dataExportColumnsTagList": [
{
"element_tag": "PROD_ELEMENT",
"display_unit_tag": "Gram",
"value": 22,
"index": 1
},
{
"element_tag": "PROD_A",
"display_unit_tag": "Day",
"value": 5,
"index": 0
},
{
"element_tag": "PROD_T",
"display_unit_tag": "Degree Celsius",
"value": 24,
"index": 0
}
]
}
]

我希望这个表的格式是这样的:

<表类>时间戳标记PROD_ELEMENT(克)指数PROD_A(天)指数PROD_T (D摄氏度)指数tbody><<tr>2020-12-17就是House1231502502020-12-17 03:10:19House122150240

我的答案一直困扰着我，所以这就是你想要的答案。

我确实需要修改列，因为我不知道你的是如何设置的。

注意:在Vue 3中，类星体将data变为rows，将pagination.sync变为v-model:pagination。链接

<template>
<q-table 
style="margin-top: 16px"
class="q-mb-sm q-ml-sm"
:data="allData"
:columns="columns"
:pagination.sync="pagination"
row-key="id"
>
<template v-slot:body="props">
<q-tr :props="props">
<q-td key="timestamp" :props="props">
{{ props.row.timestamp.replace('T', ' ') }}
</q-td>
<q-td key="tag" :props="props">
{{ props.row.tag }}
</q-td>

<template v-for="row in props.row.dataExportColumnsTagList">
<q-td :props="props" :key="row.element_tag">
{{ row.value }}
</q-td>
<q-td :key="`${row.element_tag}_INDEX`" :props="props">
{{ row.index }}
</q-td>
</template>
</q-tr>
</template>
<template v-slot:top-right>
<q-btn
color="primary"
icon-right="archive"
label="Export to csv"
no-caps
@click="exportTable"
/>
</template>
</q-table>
</template>
<script>
export default {
data() {
return {
columns: [
{
label: 'timestamp',
name: 'timestamp',
field: 'timestamp',
align: 'center',
sortable: true,
},
{
label: 'tag',
name: 'tag',
field: 'tag',
align: 'center',
sortable: true,
},
{
label: 'PROD_ELEMENT (gram)',
name: 'PROD_ELEMENT',
field: 'PROD_ELEMENT',
align: 'center',
sortable: true,
},
{
label: 'PROD_ELEMENT_INDEX',
name: 'PROD_ELEMENT_INDEX',
field: 'PROD_ELEMENT_INDEX',
align: 'center',
sortable: true,
},
{
label: 'PROD_A (Day)',
name: 'PROD_A',
field: 'PROD_A',
align: 'center',
sortable: true,
},
{
label: 'PROD_A Index',
name: 'PROD_A_INDEX',
field: 'PROD_A_INDEX',
align: 'center',
sortable: true,
},
{
label: 'PROD_T (D Celsius)',
name: 'PROD_T',
field: 'PROD_T',
align: 'center',
sortable: true,
},
{
label: 'PROD_T Index',
name: 'PROD_T_INDEX',
field: 'PROD_T_INDEX',
align: 'center',
sortable: true,
},
],
allData: [
{
id: 167831,
tag: 'House1',
timestamp: '2020-12-17T00:00:00',
dataExportColumnsTagList: [
{
element_tag: 'PROD_ELEMENT',
display_unit_tag: 'Gram',
value: 23,
index: 1,
},
{
element_tag: 'PROD_A',
display_unit_tag: 'Day',
value: 5,
index: 0,
},
{
element_tag: 'PROD_T',
display_unit_tag: 'Degree Celsius',
value: 25,
index: 0,
},
],
},
{
id: 167834,
tag: 'House1',
timestamp: '2020-12-17T03:10:19',
dataExportColumnsTagList: [
{
element_tag: 'PROD_ELEMENT',
display_unit_tag: 'Gram',
value: 22,
index: 1,
},
{
element_tag: 'PROD_A',
display_unit_tag: 'Day',
value: 5,
index: 0,
},
{
element_tag: 'PROD_T',
display_unit_tag: 'Degree Celsius',
value: 24,
index: 0,
},
],
},
],
};
},
}
</script>