我有一个类星体表,它显示了从API获取的一些信息,我试图以一种有意义的方式定义列。
{
"scan_settings": {
"group_name": "default_group",
"profile_id": "Default Scan",
"scan_occurrence": "Daily",
"scan_window_duration": 3,
"scan_window_initial_time": "12:00:00",
"scan_window_timezone": ""
}
}
我想分别显示group_name
、profile_id
、scan_occurrence
、scan_window_duration
和scan_window_initial_time
,
根据我对文档的理解,我可以定义如下列:
const columns = [
{
name: 'group_name',
label: 'Qualys scan settings',
field: row => row?.group_name
},
{
name: 'profile_id',
label: 'Qualys scan type',
field: row => row?.profile_id
},
/* and so on */
]
因此,每个单元格都将在该列中显示scan_settings.group_name
的值。然而,这就好像表正在查找与该列同名的属性,然后将其用作field
函数的参数。
这将工作与一个普通的q-table
,但我正在使用body
插槽,太,以改变显示取决于类型的信息,它已经显示(复选框布尔等)
下面是body
插槽的外观(为简洁起见,省略了一些内容):
<template #body="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
class="table-cell"
>
<span v-if="dateColumns.includes(col.name)">
{{ parseISODateStringToLocale(props.row[col.name]) }}
</span>
<!-- omitted for brevity -->
<span v-else>
{{ props.row[col.name] }}
</span>
</q-td>
</q-tr>
</template>
请注意模板是如何查找值的--这就是问题所在,也是导致这种行为的原因。但我不知道将该值放入模板中的最佳方式。我该怎么办?
1条答案
按热度按时间6gpjuf901#
如果您使用的是
body
插槽,则字段不能直接使用。https://codepen.io/Pratik__007/pen/wvXRoWZ