A
A
Anton89892019-10-29 13:06:45
Vue.js
Anton8989, 2019-10-29 13:06:45

How to add image to vuetify table?

Good day, I have a list that is output to the vuetify table, this list also displays a line with the image address,
tell me how this line can be framed with an img tag with the src attribute so that not just a line is displayed as it is now (sme0acxznhsnzna2sl9nd720gitchafc6tbwpyme7), but a picture ))

<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'
              },
            ]
          }
        },

5db80f2e35bd8587683768.png

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
Vladislav, 2019-10-29
@Anton8989

The table has a slot for a body where you can manually enter the cells in the same order that you have headers, this is in the dock in the tables section

<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>

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question