vuetity) 如何将图像放入 v-data-table

问题描述

     
      <v-data-table
        :headers="headers"
        :items="items"
        :search="search"
        :loading="loading"
        loading-text="Loading... Please wait"
        hide-default-footer
        class="elevation-1"
      >
        <template slot="items">
          <td>
            <img :src="items.imgsrc" style="width: 50px; height: 50px" />
          </td>
        </template>
      </v-data-table>

v-data-table 标签之间 我想我应该放入带有插槽等的图像，但我根本不知道。我问是因为无论我怎么看都找不到确切的代码。 'v-img' 标签中的高度似乎有效，但图像不出来。

<script>
  export default {
    data () {
      return {
        search: '',headers: [ 
          {
            text: 'img',align: 'start,filterable: false,value: 'imgsrc',type: 'Image',},{
            text: 'MyName',value: 'name',],items: [
          {
            name: 'test1',imgsrc: '@/assets/img/avatar.png',{
            name: 'test2',imgsrc: '@/assets/img/avatar2.png',}
    },}
</script>

帮助我

解决方法

插槽需要像下面这样使用

<v-data-table
    :headers="headers"
    :items="items"
    :search="search"
    :loading="loading"
    loading-text="Loading... Please wait"
    hide-default-footer
    class="elevation-1"
  >
    <template v-slot:item.imgsrc="{ item }">
      <td>
        <img :src="require(item.imgsrc)" style="width: 50px; height: 50px">
      </td>
    </template>
  </v-data-table>