el-image-viewer预览大图

Tangctt

于 2022-04-29 15:03:28 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 Debug Vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/Tang__CT/article/details/124496370

前端同时被 3 个专栏收录

10 篇文章

订阅专栏

Debug

6 篇文章

订阅专栏

Vue

6 篇文章

订阅专栏

在Vue.js前端项目中，使用el-image-viewer组件预览大图时遇到重叠显示的问题。原因是组件内部冲突，将el-image-viewer置于其他组件内部导致错误渲染。解决方法是将el-image-viewer组件移出冲突的组件之外，从而避免预览大图时的重叠现象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-image-viewer预览大图

问题描述

在使用Elememt UI组件库时，通过el-image-viewer组件实现大图预览,会导致预览的大图重叠显示

原因

Elememt UI组件库中的el-table组件和el-image-viewer组件冲突
把el-image-viewer组件包含在了el-table组件内，导致el-table组件将其作为el-table-column进行渲染

<el-table :data="simulationResult" stripe style="width: 100%">
            <el-table-column prop="jobname" label="项目名称" width="220">
            </el-table-column>

            <el-image-viewer
            v-if="showViewer"
            :on-close="
              () => {
                showViewer = false;
              }
            "
            :url-list="selectSimulationResult"
          />
            
</el-table>

解决方法

将el-image-viewer组件提取到el-table组件外，避免发生错误的渲染

<el-table :data="simulationResult" stripe style="width: 100%">
            <el-table-column prop="jobname" label="项目名称" width="220">
            </el-table-column>       
</el-table>

<el-image-viewer
            v-if="showViewer"
            :on-close="
              () => {
                showViewer = false;
              }
            "
            :url-list="selectSimulationResult"
          />