动态插入图像到'v-data-table'

问题描述

<v-data-table
  :headers="headers"
  :items="items"
  :search="search"
  hide-default-footer
  class="elevation-1"
>
  <template #[`item.employee_avatar`]="{ item }">
    <v-img
      :src="require('@/assets/img/img2.jpg')"
      :alt="item.name"
      style="width: 100px; height: 100px"
    />
  </template>
</v-data-table>

收到的是固定路径的图片，但是我想用每个物体的图片路径来表达图片。我想自动跟随 imgsrc 的 items 路径值。

export default {
  data() {
    return {
      search: '',loading: true,headers: [
        {
          text: 'Avatar',value: 'employee_avatar',divider: true,align: 'center',sortable: false,width: '100px',},{
          text: 'myname',value: 'name',],items: [
        {
          name: 'myname',imgsrc: "@/assets/avatar.png",

下面的代码是我试过的代码。

<template #[`item.employee_avatar`]="{ item }">
  <v-img
    :src="require(item.imgsrc)"
    :alt="item.name"
    style="width: 100px; height: 100px"
  />
</template>

即使我填写了上面的内容也会有错误。

这是怎么回事？帮帮我...

解决方法

您可以使用 v-slot 代替 #[item.employee_avatar]：

<template v-slot:item.employee_avatar="{ item }">
  <v-img
    :src="require(item.imgsrc)"
    :alt="item.name"
    style="width: 100px; height: 100px"
  />
</template>