解决 vue3 element 表格和图片预览样式有冲突

最新推荐文章于 2024-06-18 15:17:09 发布

li@h

最新推荐文章于 2024-06-18 15:17:09 发布

阅读量3.6k

点赞数 4

文章标签： elementui

本文链接：https://blog.csdn.net/weixin_49066399/article/details/134405794

版权

文章讲述了在Vue项目中，使用ElementUI的el-image组件时遇到预览样式冲突的问题，通过设置preview-teleported属性为true并将其插入到body元素上，解决了z-index失效的问题。

摘要由CSDN通过智能技术生成

查看表格中的预览出现样式问题冲突

  <el-image
    :src="`${realSrc}`"
    fit="cover"
    :style="`width:${realWidth};height:${realHeight};`"
    :preview-src-list="realSrcList"
    :append-to-body="true"
  >
    <template #error>
      <div class="image-slot">
        <el-icon><picture-filled /></el-icon>
      </div>
    </template>
  </el-image>

问题图：
在这里插入图片描述
给el-image加z-index=99999999999 也无效

解决方法：加上 preview-teleported 属性
preview-teleported ：image-viewer 是否插入至 body 元素上

  <el-image
    :src="`${realSrc}`"
    fit="cover"
    :style="`width:${realWidth};height:${realHeight};`"
    :preview-src-list="realSrcList"
    :append-to-body="true"
    :preview-teleported="true"
  >
    <template #error>
      <div class="image-slot">
        <el-icon><picture-filled /></el-icon>
      </div>
    </template>
  </el-image>