0

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

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

如何为我的照片栏使用 EL-table 编写 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-table 为我的照片列编写 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

1

我认为这不是 Element UI 的错误，也许你可以检查 props.row.photo ！== null，真的为 null 吗？另一种方式，检查 src="/static/img/bastet.png" 真实路径？

于 2018-07-27T05:02:10.190 回答