vue+elementUI实现表格中点击图片预览大图功能
说起预览大图,最先想到的肯定是ElementUI中的开启大图预览,但是它的存储类型数组,如果我们需要在表格中点击某一行的某张图片就显示它的大图,就不是很好实现;所以这里我直接写了一个弹框组件来显示大图,效果也不错,可以用于审核证件时查看证件等场景。
·
说起预览大图,最先想到的肯定是
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 v-model="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>
搞定,既简单又直接
更多推荐
已为社区贡献8条内容
所有评论(0)