likes
comments
collection
share

解决vue3使用element-plus组件el-image图片被表格或父元素层级重叠覆盖问题一、错误复现 效果复现 代

作者站长头像
站长
· 阅读数 60

一、错误复现

效果复现

解决vue3使用element-plus组件el-image图片被表格或父元素层级重叠覆盖问题一、错误复现 效果复现 代

代码复现

<el-table-column prop="attachmentUrl" label="凭证" align="center" min-width="120">
  <template #default="scope">
    <el-image
      style="width: 60px; height: 60px;"
      :src="scope.row.attachmentUrl"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="[scope.row.attachmentUrl]"
      fit="cover"
    />
  </template>
</el-table-column>

二、解决方案

方案描述

  • 查看element-plus官网el-image文档preview-teleported属性

解决vue3使用element-plus组件el-image图片被表格或父元素层级重叠覆盖问题一、错误复现 效果复现 代

  • 通过开启preview-teleported属性将el-image插入至body，不受父元素变化影响。

代码

<el-table-column prop="attachmentUrl" label="凭证" align="center" min-width="120">
  <template #default="scope">
    <el-image
      style="width: 60px; height: 60px;"
      :src="scope.row.attachmentUrl"
      :max-scale="7"
      :min-scale="0.2"
      preview-teleported
      :preview-src-list="[scope.row.attachmentUrl]"
      fit="cover"
    />
  </template>
</el-table-column>
转载自:https://juejin.cn/post/7402869297506582537
评论
请登录