Как добавить картинку в таблицу vuetify?

Question

[Anton8989]

Доброе время суток, у меня есть спиок, который выводится в таблицу vuetify, в этом списке также выводится строчка с адресом картинки,
подскажите как эту строчку можно обрамить тегом img c атрибутом src, чтобы выводилась не просто строчка как сейчас(sme0acxznhsnzna2sl9nd720gitchafc6tbwpyme7), а картинка))

<template lang="pug">
v-app.contacts
  div.btn-container
    CompanyDialog(:nameBtn="nameBtn" :props="company")
  v-card
    v-card-title
      v-spacer
      v-text-field(v-model='search', append-icon='mdi-magnify', label='Поиск', single-line='', hide-details='')
    v-data-table(:headers='headers', :items='companies', :search='search', @click:row='goInfo'")
</template>
Вот код
 export default {
        name: "Companies",
        data () {
        return {
            search: '',
            dialog: false,
            nameBtn: 'Добавить',
            company: '',
            headers: [
              { text: 'Логотип', 
                value: 'logo', 
                width: '200' 
              },
              {
                text: 'Название компании',
                align: 'left',
                sortable: false,
                value: 'name'
              },
            ]
          }
        },

Comments

[Игорь]

Для этого существуют слоты.

Answer 1

[Владислав]

У таблицы есть слот для боди куда ты можешь руками вписать ячейки в том же порядке что у тебя стоят хэдеры, это есть в доке в разделе таблиц

<v-data-table
  :headers="headers"
  :items="myitems"
>
<template v-slot:body="{items}">
  <tbody>
    <tr v-for="(item,index) in items" :key="index">
      <td>
        <img :src="item.img"/>
      </td>
    </tr>
   </tbody>
</template>
</v-data-table>