table 点击文字按钮预览图片

你爱喝果粒橙吗

已于 2022-08-30 10:52:26 修改

阅读量325

点赞数

文章标签： vue.js elementui javascript

于 2022-08-29 18:07:35 首次发布

本文链接：https://blog.csdn.net/weixin_64064327/article/details/126589940

版权

话不多说上代码(也是看了某位大佬的，找不到原文章了，在此感谢)

先引入

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

components: {
      ElImageViewer
}

使用

（把el-image-viewer放在table外面防止图片重叠）

<el-table-column header-align="center" label="作业图片" width="182">
          <template slot-scope="scope">
            <span style="color: #FF7C06;cursor: pointer;" @click="onPreview(scope.row.files)">查看</span>
            
          </template>
        </el-table-column>

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


 onPreview(img) {
      this.url = img
      this.showViewer = true
    },
    // 关闭查看器
      closeViewer() {
      this.url = []
      this.showViewer = false
    },