[Vue3+Element-Plus]点击列表中的图片预览时，图片被表格覆盖。

问题如下：

 点击图片进行预览，但是还能继续选中其他的图片进行预览，鼠标放在表格上，那一行表格也会选中，如图所示第一行，那么该如何解决呢？

源代码：

<el-table-column prop="id" label="ID" width="80" align="center" sortable/>
<el-table-column label="商品图片" width="85px">
    <template #default="scope">
        <el-image
            style="width: 60px;height: 60px;"
            :src="scope.row.avatar"
            :preview-src-list="[scope.row.avatar]"
            hide-on-click-modal="true">
            <template #error>
              <div class="image-slot">
                <el-icon><user /></el-icon>
              </div>
            </template>
          </el-image>
    </template>
</el-table-column>
<el-table-column prop="username" label="用户名" width="130"/>

官网文档有这么一个属性，官网是这个描述的（Image 属性）。

  于是在<el-image>中加入属性：

preview-teleported="true"

<el-table-column prop="id" label="ID" width="80" align="center" sortable/>
<el-table-column label="商品图片" width="85px">
    <template #default="scope">
          <el-image
            style="width: 60px;height: 60px;"
            :src="scope.row.avatar"
            :preview-src-list="[scope.row.avatar]"
            hide-on-click-modal="true"
            preview-teleported="true">
            <template #error>
              <div class="image-slot">
                <el-icon><user /></el-icon>
              </div>
            </template>
        </el-image>
    </template>
</el-table-column>
<el-table-column prop="username" label="用户名" width="130"/>

 添加过之后问题就解决了，以上就是本章的全部内容，感谢您的阅读。