Q-table：从单个字段渲染多个列？

Question

我有一个类星体表，它显示从 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_duration

和

scan_window_initial_time

,

据我了解docs，我可以像这样定义列：

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>

注意模板如何查找值 - 这就是问题所在，这就是引入此行为的原因。但我不知道将该值放入模板中的最佳方法是什么。我能做什么？

Answer 1

如果您使用

body

插槽，则无法直接使用字段。

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

Answer 2

我使用

body-cell-[name]

插槽进行了类似的分组：

      <q-td
        :key="column.name"
        :props="props"
      >
        <slot
          :name="`body-cell-${column.name}`"
          :props="props"
          :column="column"
          :row="props.row"
        >
          {{ props.row[column.name] }}
        </slot>
      </q-td>
    </template>

然后槽中的默认值在父级中被自定义单元格或自定义组件替换，例如：

    <template #body-cell-status="props">
      <status-cell :status="props.row.status"></status-cell>
    </template>

您可以在此处使用动态组件，即使用您的动态值代替上面的

-status

，然后将动态值与

<component :is=...>

一起使用。