Vue+ElementUI表格实现点击图片预览功能

2021-08-06   阅读:251   分类:前端    标签: Vue

功能描述:用户点击表格列表其中一张图片,显示弹窗,并显示图片。

实现思路:给图片添加点击事件,点击图片获取图片url,展示图片

效果展示:

实现代码:

1、给表格列图片添加点击事件,传递参数

<template>
	 <el-table :data="VipList" border stripe @selection-change="handleSelectionChange" v-loading="loading">
		<el-table-column align="center" type="selection" width="55"></el-table-column>
		<el-table-column label="ID" prop="id" min-width="50"></el-table-column>
		<el-table-column label="昵称" prop="nickname"></el-table-column>
		<el-table-column label="头像" prop="img" width="50">
		   <template scope="scope">
			   <el-image :src="scope.row.img" @click="ShowpreviewPic(scope.row.img)"></el-image>
			</template>
		</el-table-column>
		<el-table-column label="操作" width="100px">
			<template slot-scope="scope">
				<el-button type="danger" size="mini">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
    <!-- 图片预览   放在表格外面,这是个弹出狂-->
    <el-dialog :visible.sync="lookdialogVisible" :modal="false" title="图片预览" width="20%">
        <img :src="previewpic" alt=""  width="100%" />
    </el-dialog>
    <!-- 图片预览 -->
</template>

2、点击方法,点击图片复制给图片标签,并显示弹窗,显示图片。

<script>
export default {
  data () {
      
    return {
      lookdialogVisible: false,
      previewpic: ""
    }
  },
  methods: {
    //预览大图
    ShowpreviewPic(url) {
        this.previewpic = url;
        this.lookdialogVisible = true;
    }
  }
}
</script>

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/761.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
勤于学习,乐于分享。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×