Q-table:从单个字段呈现多个列?



我有一个类星体表,它显示了从API获取的一些信息,我试图以一种有意义的方式定义列。该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_durationscan_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>

注意模板如何查找值——这就是问题所在,这就是引入这种行为的原因。但是我不知道把这个值放到模板里面的最好方法是什么。我能做什么?

如果您使用的是body插槽,那么您不能直接使用字段

https://codepen.io/Pratik__007/pen/wvXRoWZ

相关内容

  • 没有找到相关文章

最新更新