想要在数据表行中显示图像

时间:2019-09-15 02:25:02

标签: javascript vue.js datatable vuetify.js

我想在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%"
      }],

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

1 个答案:

答案 0 :(得分:0)

假设您使用的是最新版本的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>