Element UI el-image-viewer使用注意

太过爱你忘了你带给我的痛 2022-10-27 12:25 457阅读 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 条评论，457人围观）

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

相关阅读

相关 element-ui中使用loading

我们通过接口调取数据时，有那么一两秒的时间，是在动态的加载数据，有可能会出现一个暂无数据的尴尬场景，这个时候，我们可以用到loading了。我们可以以下面这种优雅的方...

素颜马尾好姑娘i/ 2024年04月18日 16:15/ 0 赞/ 28 阅读

相关 vue和element-ui使用

一篇已经创建好一个vue项目。https://mp.csdn.net/postedit/80926242 这一篇主要是创建一个vue项目并结合饿了么框架element-...

Bertha 。/ 2024年04月17日 05:25/ 0 赞/ 28 阅读

相关 element-ui本地使用

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

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

相关 element-ui打包注意事项

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

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

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

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

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

相关 vue使用element-ui

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

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

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

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

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

相关 Vue推荐使用element-ui

安装:npm i element-ui -S 配置:main.js中添加 import ElementUI from 'element-ui'; impor

我会带着你远行/ 2022年03月21日 08:10/ 0 赞/ 176 阅读

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

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

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

相关 element-ui使用指南

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

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