我想在 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%"
}],
如何显示我的图像。此方法仅显示图像文本名称。
最佳答案
假设您使用 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>
关于javascript - 想要在数据表行中显示图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57940673/