Element UI el-image-viewer使用注意

项目场景：

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
},