时间戳

首页 > 解决方案 > 如何将图像显示到vue js Datatable中

javascript - 如何将图像显示到vue js Datatable中

问题描述

伙计们，我需要在 Datatable 的字段中显示图像我已经尝试了一切但没有任何效果，

那时我的代码是：

<q-table
    :data="driverTable.data"
    :columns="driverTable.columns"
    row-key="objectId"
  >
    <template v-slot:no-data="{ icon, message, filter }">
      <div class="full-width row flex-center q-gutter-sm">
        <q-icon size="2em" name="sentiment_dissatisfied" />
        <span>{{ message }}</span>
        <q-icon size="2em" :name="filter ? 'filter_b_and_w' : icon" />
      </div>
    </template>

    <template v-slot:top="props">
      <q-btn flat round dense
        @click="props.toggleFullscreen" color="grey-8" class="q-ml-md"
        :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
        :v-bind="props.inFullscreen"
        :title="props.inFullscreen ? 'Minimiser' : 'Plain ecran'"
      />
    </template>
  </q-table>

和我的js代码：

data () {
    return {
      driverTable: {
        columns: [
          {
            name: 'objectId',
            field: row => row.objectId,
            format: val => ''
          },
          {
            name: 'name',
            label: 'Nom complete',
            align: 'left',
            field: row => row.name,
            format: val => `${val}`,
            sortable: true,
            classes: 'ellipsis'
          },
          {
            name: 'carPermit',
            required: true,
            label: 'Permit',
            field: row => row.carPermit, //
            align: 'center',
            format: val => `${'<img height="75%" width="75%" src="' + val + '"/>'}`
          }
        ],
        data: []
      }
    }
  }

我已经尝试过<img>使用字段格式并在其上添加了 url 源，但它只是让我了解了搅拌格式

标签： javascriptvue.js

解决方案

请遵循这个

<q-table
        :data="driverTable.data"
        :columns="driverTable.columns"
        row-key="objectId"
    >
        <template v-slot:no-data="{ icon, message, filter }">
            <div class="full-width row flex-center q-gutter-sm">
                <q-icon size="2em" name="sentiment_dissatisfied" />
                <span>{{ message }}</span>
                <q-icon size="2em" :name="filter ? 'filter_b_and_w' : icon" />
            </div>
        </template>

        <template v-slot:top="props">
            <q-btn flat round dense
                   @click="props.toggleFullscreen" color="grey-8" class="q-ml-md"
                   :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                   :v-bind="props.inFullscreen"
                   :title="props.inFullscreen ? 'Minimiser' : 'Plain ecran'"
            />
        </template>
        <template v-slot:body-cell-carPermit="props">
            <q-avatar>
                <img :src="props.row.carPermit">
            </q-avatar>
        </template>


    </q-table>

并从 cardPermit 中删除格式和字段键

data () {
return {
  driverTable: {
    columns: [
      {
        name: 'objectId',
        field: row => row.objectId,
        format: val => ''
      },
      {
        name: 'name',
        label: 'Nom complete',
        align: 'left',
        field: row => row.name,
        format: val => `${val}`,
        sortable: true,
        classes: 'ellipsis'
      },
      {
        name: 'carPermit',
        required: true,
        label: 'Permit',
        align: 'center',
      }
    ],
    data: []
  }
}

}

推荐阅读