Vue + ElementPlus 图片预览遮罩层异常

为啥要写这篇文章

本猿在遇到第二个问题时，熟练的打开某搜索引擎求助。当然，在某博客网站找到了类似的异常情况。但很遗憾，文章要收费。本猿并没有成功白嫖到解决方案，只能另找解决方案。在看element plus的文档时找到了解决方案，为了让广大程序猿们在遇到同样问题时不会像我这样糟心，所以决定将解决方案免费分享给大家。
文章绝对原创，没有剽窃行为，大家放心食用。若要转载，烦请标明出处，谢谢。

在使用Vue + Element Plus 图片预览时遇到了以下几个问题：

• <el-image /> 预览时需要配合 :preview-src-list="srcList" 来使用，srcList 是一个数组，在使用时需要先初始化一个srcList才能进行图片预览，但我需求是在分页列表进行预览，如果对srcList逐个进行初始化，会大大降低页面渲染效率。我采用最粗暴的方式简单实现了一下，代码如下：

<template v-slot="scope">
  <el-image  :preview-src-list="[scope.row.photoUrl]" />
</template>

这样就简单的实现了在列表中的图片预览。

• 以上代码虽然实现了图片预览，却出现了其他异常情况，如下图：
  
  通过图片可以看出，遮罩层并没有将后面的Table遮住，且显示样式也有问题。
  这个问题相当简单，只需要在<el-image />中加一个属性即可搞定，代码如下：

<template v-slot="scope">
  <el-image  :preview-src-list="[scope.row.photoUrl]" :preview-teleported="true" />
</template>

如上述代码，添加preview-teleported属性即可，默认是false，改为true即可。