Element UI el-image-viewer使用注意

太过爱你忘了你带给我的痛 2022-10-27 12:25 476阅读 0赞

# 项目场景： #

#### el-image-viewer使用注意 ####

更正在el-table中使用el-image-viewer的注意事项

--------------------

# 问题描述： #

在table中使用el-image-viewer循环查看图片，使得其中的一些图片成为了背景图，导致多张图片重叠

<template slot-scope="scope">
        <el-image-viewer
             v-if="showViewer"
             :on-close="closeViewer"
             :url-list="viewUrl" style="color: red"/>
         <el-button type="text" v-bind:disable=" scope.row.urlList.length === 0" @click="onPreview(scope.row.urlList)">查看图片</el-button>
    </template>

--------------------

# 原因分析： #

在table中使用el-image-viewer，当showViewer为true时，导致每个el-image-viewer都打开了，从而导致图片重叠

--------------------

# 解决方案： #

把el-image-viewer放在table外面，当作一个容器，通过点击事件给url-list传值，并展示el-image-viewer

<el-image-viewer
        v-if="showViewer"
        :on-close="closeViewer"
        :url-list="srcList"/>

onPreview(path) {
        
        this.srcList = path
        this.showViewer = true
    },
    closeViewer() {
        
        this.srcList=[]
        this.showViewer = false
    },

发表评论取消回复

表情：

评论列表（有 0 条评论，476人围观）

还没有评论，来说两句吧...

相关阅读

相关 Element-ui的使用

npm 安装推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。 npm i element-ui -S ![在这里插入图片描述]

迈不过友情╰/ 2023年10月06日 17:52/ 0 赞/ 7 阅读

相关 element-ui本地使用

　对于element-ui的使用，官网给了这么一个例子： <!DOCTYPE html> <html> <head> <meta char

小鱼儿/ 2022年12月28日 12:42/ 0 赞/ 230 阅读

相关 element-ui打包注意事项

最近使用element-ui打包时出现了失败问题,在此总结问题一: 打包失败失败信息如下: ERROR in static/js/vendor.5e8a4

朴灿烈づ我的快乐病毒、/ 2022年11月18日 01:57/ 0 赞/ 434 阅读

相关 Element UI el-image-viewer使用注意

项目场景： el-image-viewer使用注意更正在el-table中使用el-image-viewer的注意事项 --------------------

太过爱你忘了你带给我的痛/ 2022年10月27日 12:25/ 0 赞/ 477 阅读

相关 vue使用element-ui

vue使用elementUI [https://www.jianshu.com/p/070c6e2b665c][https_www.jianshu.com_p_070c6e2

水深无声/ 2022年10月09日 06:20/ 0 赞/ 197 阅读

相关【 Element UI 】—Element UI 的基本使用

【 Element UI 】—Element UI 的基本使用一、基于命令行的方式手动安装 npm 安装 npm i element-ui -S

以你之姓@/ 2022年09月16日 04:45/ 0 赞/ 201 阅读

相关【element ui】element ui使用less的情况下修改主题

前言转载自：[https://blog.csdn.net/wangcuiling\_123/article/details/78513245][https_blog.c

Dear 丶/ 2022年09月12日 03:44/ 0 赞/ 258 阅读

相关 Element ui使用相关

v-if 切换 table，导致表格数据显示错乱原因：使用v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现数据冲突导致table渲染出错解决

末蓝、/ 2022年09月08日 03:40/ 0 赞/ 32 阅读

相关 vue+Element-ui需要注意的坑

1、form标签中的 model属性与form-item标签中的prop填写不能随意填写，后续取值model.prop而不是输入框中的值。 2、rules中的验证信息，要加上

梦里梦外;/ 2022年01月22日 04:41/ 0 赞/ 255 阅读

相关 element-ui使用指南

1. 下载插件 npm i element-ui -S 1. 在`main.js` 输入以下代码 import ElementUI from "ele

梦里梦外;/ 2021年07月25日 11:07/ 0 赞/ 390 阅读