vue.js Q表:从单个字段呈现多个列?

qij5mzcb  于 2022-12-14  发布在  Vue.js
关注(0)|答案(1)|浏览(129)

我有一个类星体表,它显示了从API获取的一些信息,我试图以一种有意义的方式定义列。

  1. {
  2. "scan_settings": {
  3. "group_name": "default_group",
  4. "profile_id": "Default Scan",
  5. "scan_occurrence": "Daily",
  6. "scan_window_duration": 3,
  7. "scan_window_initial_time": "12:00:00",
  8. "scan_window_timezone": ""
  9. }
  10. }

我想分别显示group_nameprofile_idscan_occurrencescan_window_durationscan_window_initial_time
根据我对文档的理解,我可以定义如下列:

  1. const columns = [
  2. {
  3. name: 'group_name',
  4. label: 'Qualys scan settings',
  5. field: row => row?.group_name
  6. },
  7. {
  8. name: 'profile_id',
  9. label: 'Qualys scan type',
  10. field: row => row?.profile_id
  11. },
  12. /* and so on */
  13. ]

因此,每个单元格都将在该列中显示scan_settings.group_name的值。然而,这就好像表正在查找与该列同名的属性,然后将其用作field函数的参数。
这将工作与一个普通的q-table,但我正在使用body插槽,太,以改变显示取决于类型的信息,它已经显示(复选框布尔等)
下面是body插槽的外观(为简洁起见,省略了一些内容):

  1. <template #body="props">
  2. <q-tr :props="props">
  3. <q-td
  4. v-for="col in props.cols"
  5. :key="col.name"
  6. :props="props"
  7. class="table-cell"
  8. >
  9. <span v-if="dateColumns.includes(col.name)">
  10. {{ parseISODateStringToLocale(props.row[col.name]) }}
  11. </span>
  12. <!-- omitted for brevity -->
  13. <span v-else>
  14. {{ props.row[col.name] }}
  15. </span>
  16. </q-td>
  17. </q-tr>
  18. </template>

请注意模板是如何查找值的--这就是问题所在,也是导致这种行为的原因。但我不知道将该值放入模板中的最佳方式。我该怎么办?

6gpjuf90

6gpjuf901#

如果您使用的是body插槽,则字段不能直接使用。
https://codepen.io/Pratik__007/pen/wvXRoWZ

相关问题