想在数据表行中显示图像

Question

我想在 vuetify 数据表行中显示图像。我用下面的代码试过这个。

<v-data-table :headers="headers" :items="desserts" :search="search" class="elevation-1">
      <template slot="items" slot-scope="props">
        <td>
          <img :src="'/assets/img/' + props.item.name" style="width: 50px; height: 50px" />
        </td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
      </template>
      <template v-slot:item.action="{ item }">
        <v-icon small class="mr-2" @click="editItem(item)">edit</v-icon>
        <v-icon small @click="deleteItem(item)">delete</v-icon>
      </template>
    </v-data-table>

但此代码无法正常工作。仅显示 v-data-table 循环和模板槽不起作用的数据。我的脚本是这样的。

      search: "",
      headers: [
        {
          text: "Images",
          align: "left",
          sortable: false,
          value: "name"
        },
        { text: "Calories", value: "calories" },
        { text: "Fat (g)", value: "fat" },
        { text: "Carbs (g)", value: "carbs" },
        { text: "Protein (g)", value: "protein" },
        { text: "Iron (%)", value: "iron" },
        { text: "Actions", value: "action", sortable: false }
      ],
      desserts: [
      {
          value: false,
          name: "notfound.png",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: "1%"
      }],

如何显示我的图像。此方法仅显示图像文本名称。

Answer 1

假设您使用 vuetify 的最新版本，插槽的工作方式略有不同，您可以仅为要自定义的列定义插槽。 （顺序由标题定义）

<div id="app">
    <v-data-table :headers="headers" :items="desserts" class="elevation-1">
      <template v-slot:item.name="{ item }">
          <img :src="'/assets/img/' + item.name" style="width: 50px; height: 50px" />
      </template>

      <template v-slot:item.action="{ item }">
        <v-icon small class="mr-2" @click="editItem(item)">edit</v-icon>
        <v-icon small @click="deleteItem(item)">delete</v-icon>
      </template>
    </v-data-table>
</div>