在el-table中使用el-image图片预览被其他表格遮挡，使用z-index层级设置无效

重生之我要当java大帝

于 2024-11-26 22:14:51 发布

阅读量576

点赞数 9

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2302_80480374/article/details/144069512

版权

使用 z-index: initial !important; 无效

只需要在el-image中加入 :preview-teleported="true" 把image-viewer 插入至 body 元素上，就可以解决问题了

<el-table-column label="图书封面" prop="img">
  <template #default="scope">
    <!--
    带图片预览的照片展示
    src 去请求服务器下载图片的地址(携带服务器返回的时间戳)
    -->
    <el-image
        style="width: 100px; height: 100px; z-index: initial !important;"
        :src= "`${fileURL}${scope.row.img}`"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="[`${fileURL}${scope.row.img}`]"
        fit="cover"
    />
  </template>
</el-table-column>