0

DB に写真が存在する場合にその画像を表示し、何もない場合にストック画像を指すことができるように、写真列だけに EL テーブルを使用して v-if v-else を作成する方法を教えてください。

プロフィール写真用の EL テーブルによって生成された列があります。ただし、一部のアイテムには写真がありません...プレースホルダー画像を含むサブフォルダーにデフォルトの画像があります。

写真の列だけに EL テーブルを使用して v-if v-else を記述する方法は?

(腹立たしい: もしこれが基本的な html なら、私は今までにやったでしょう。しかし、このコードベースは、ELement UI と呼ばれるある種の神に見捨てられた html ラッパーライブラリを使用しています)

これが問題のテーブル列です...

```

<el-table-column v-for="column in tableColumns"
      :key="column.label"
      :min-width="column.minWidth"
      :prop="column.prop"
      :label="column.label">
</el-table-column>

```

これらの値が tableColumns に供給されています

```

tableColumns: [
      {
        prop: 'photo',
        label: 'Pic',
        minWidth: 100
      },
      {
        prop: 'name',
        label: 'Name',
        minWidth: 200
      },
      {
        prop: 'gender',
        label: 'Gender',
        minWidth: 250
      },
      {
        prop: 'age',
        label: 'Age',
        minWidth: 100
      },
      {
        prop: 'cat_type',
        label: 'Type',
        minWidth: 120
      }
 ],

```

繰り返しますが、DB に写真が存在する場合にその画像を表示し、何もない場合にストック画像を指すことができるように、写真の列だけに EL テーブルを使用して v-if v-else を記述する方法は?

このようなもの....

```

<template slot-scope="props">
   <a v-tooltip.top-center="'Like'" class="btn-info btn-simple btn-link" @click="handleLike(props.$index, props.row)">
   <!--TODO: small profile pic-->
   <div class="col-md-2 img-container photo-thumb-sm" v-if="props.row.photo !== null">
       <img :src="props.row.photo" alt="thumb" class="rounded-circle img-fluid max-width: 100%;height: auto;">
   </div>
   <div class="col-md-2 img-container photo-thumb-sm" v-else>
        <img src="/static/img/bastet.png" alt="bastet">
   </div>
 </a>
</template>

```

Element UI は初めてです。そして、私はそれに腹を立てています。しかし、私もそれで立ち往生しています。どんな助けでも大歓迎です。ありがとうございました。

4

1 に答える 1