如何在 vuetify 数据 table 中显示查找 table 的值

Question

  <v-data-table
    :headers="headers"
    :items="desserts"
  ></v-data-table>

我试图在 table 的列中显示的不是项目 object 中的值，而是我通过参考键从查找 table 中获得的值。

具体来说，这意味着：在我的项目object“甜点”中，一个属性不包含要显示的实际数据，而是查找的外键table。

我知道您可以使用插槽来操作某些要显示的值。但是我不知道如何通过查找 table 最有效地做到这一点。非常感谢您的指导。

这是数据table项object:

 items: [
        {
          category_id: 1,  # <--- this is a foreign key to a lookup table
          name: 'Mousse au Chocolat',
          calories: 159,
        },
        {
          category_id: 2,  # <--- this is a foreign key to a lookup table
          name: 'Ice cream sandwich',
          calories: 237,
        }
      ]

我的查找 table 数据也存储为 json，如下所示：

 categories: [
        {
          id: 1,  # <--- this is what category_id in the items object refers to
          name: 'Good Stuff',
        },
        {
          category: 2,  # <--- this is what category_id in the items object refers to
          name: 'Cold Stuff',
        }
      ]

这是我的 headers object:

  headers: [
      { text: 'Category', value: 'category_id' },
      { text: 'Name', value: 'name' },
      { text: 'Calories', value: 'calories' },
    ],

Answer 1

您可以使用模板来显示您想要的任何值：

 <v-data-table
    :headers="headers"
    :items="desserts"
  >
<template #item.category_id={ item }>
   <!-- here get your value from your other json -->
   {{ this.categories.find(x => x.category === item.category_id)?.name }}
</template>
</v-data-table>

如果你想让它更干净，你可以使用一个函数来获取你的值。

此处：#item.category_id={ item }，类别是 header 值

如何在 vuetify 数据 table 中显示查找 table 的值

How to display value from lookup table in vuetify data table

vue.js

vuetify.js

vuetifyjs3

vuetify-datatable