Question

如何使用EL表为我的照片栏写v-if v-else，以便当数据库中有照片时，我可以看到该图像，而当没有照片时，可以指向我的库存图像？

我有一个EL表为我的个人资料照片生成的列。但是，有些项目没有图片...我在包含占位符图像的子文件夹中有一个默认图像。

如何仅使用我的照片列使用EL表编写v-if v-else？

（令人毛骨悚然：如果我现在在这里完成基本的html。但是此代码库使用的是某种被抛弃的html包装器库，称为ELement UI）

这是有问题的表格列...

```

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

```

同样，如何使用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的新手。我很生气。但是我也坚持下去。任何帮助表示赞赏。谢谢。

Answer 1

我认为这不是Element UI的错误，也许您可以检查props.row.photo！==为null，真的为null？换句话说，检查src =“ / static / img / bastet.png”真实路径吗？

为什么元素UI存在，或者如何为我的个人资料图像列创建v-if v-else

1 个答案: