vue+elementUI实现表格中点击图片预览大图功能

小半 • 2023年2月11日上午11:25 • 技术随笔 • 阅读 210

说起预览大图，最先想到的肯定是ElementUI中的preview-src-list开启大图预览，但是它的存储类型数组，如果我们需要在表格中点击某一行的某张图片就显示它的大图，就不是很好实现；所以这里我直接写了一个弹框组件来显示大图，效果也不错，可以用于审核证件时查看证件等场景

演示效果：

弹框组件代码

<template>
    <el-dialog title="营业执照" :visible.sync="isShow">
      <el-image style="width: 100%; height: 100%" :src="this.imgSrc"></el-image>
    </el-dialog>
</template>

<script>
export default {
  props: {
    show: Boolean,
    imgSrc: String
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  }
}
</script>

表格页面部分代码

营业执照那一列的代码

<el-table-column prop="license" min-width="100" label="营业执照" show-overflow-tooltip>
	<template slot-scope="scope">
    	<div class="demo-image__preview">
        	<el-image style="width: 100px; height: 50px" :src="scope.row.license" @click="showBigImage(scope.row.license)"></el-image>
        </div>
    </template>
</el-table-column>

调用弹框组件，要写在el-table外面

<License-Big-Dialog :show.sync="LicenseBigDialog" :imgSrc="imgSrc"/>

script部分代码

<script>
// 引入弹框组件
import LicenseBigDialog from './components/LicenseBigDialog.vue'
export default {
	components: {
    	LicenseBigDialog
  	},
  	data() {
    	return {
      		LicenseBigDialog: false, // 弹框状态
      		imgSrc: '' // 传过去的图片路径
    	}
  	},
  	methods: {
  		// 点击事件
		showBigImage(src){
      		this.LicenseBigDialog = true
      		this.imgSrc = src
    	},
	}
}
</script>