vue2升级vue3：图片点击预览出现样式错乱

表格内的图片点击预览出现样式错乱

表格里的图片预览后，预览层只显示在表格区域里，没有覆盖整个页面，而是被页面容器“裁剪”了，看起来像是只在表格区域中间显示一块

这在 Element Plus 的 el-image 预览里是一个比较常见的问题，原因通常是：

1️⃣ 父容器有 transform / overflow 导致层级被限制

很多后台布局（如 el-table 外层、dialog、drawer、layout）会有：

overflow: hidden;
transform: translate3d(...);

这样会导致 fixed / teleport 的层被限制在父容器内。

所以预览层就不会覆盖整个页面，而是被裁剪。

2️⃣ preview-teleported 没有开启（Element Plus 关键属性）

在 Element Plus 中，图片预览需要开启 teleport 到 body。

你现在的代码：

<el-image
  class="table-image-preview"
  style="width: 90px; height: 50px"
  :src="scope.row.appendixFiles[0].fullUrlShow"
  :preview-src-list="scope.row.imgList"
  :append-to-body="true"
  fit="cover"
>

append-to-body 其实 不是 el-image 的属性。

正确写法应该是：

<el-image
  class="table-image-preview"
  style="width: 90px; height: 50px"
  :src="scope.row.appendixFiles[0].fullUrlShow"
  :preview-src-list="scope.row.imgList"
  preview-teleported
  fit="cover"
/>

✅ 改成这样

<el-image
  class="table-image-preview"
  style="width: 90px; height: 50px"
  :src="scope.row.appendixFiles[0].fullUrlShow"
  :preview-src-list="scope.row.imgList"
  :preview-teleported="true"
  fit="cover"
/>

---

3️⃣ 如果还不行，再检查这个 CSS

某些布局会有：

.el-table__body-wrapper {
  overflow: hidden;
}

可以测试：

.el-table {
  overflow: visible;
}

不过 一般 preview-teleported 就能解决。

---

📌 最推荐写法（完整）

<el-table-column label="图片" align="center" min-width="90px">
  <template #default="scope">
    <div v-if="scope.row.appendixFiles?.length">
      <el-image
        style="width:90px;height:50px"
        :src="scope.row.appendixFiles[0].fullUrlShow"
        :preview-src-list="scope.row.imgList"
        :preview-teleported="true"
        fit="cover"
      />
    </div>
  </template>
</el-table-column>

---

💡 额外建议（企业项目常用）

如果你的 imgList 其实只有一张，可以这样写更安全：

:preview-src-list="[scope.row.appendixFiles[0].fullUrlShow]"

避免 imgList undefined。