1.首先在<el-table>的下面用预览图片的组件:
<el-image-viewer v-if="showImagePreview" :url-list="previewList" hide-on-click-modal teleported :on-close="closePreview" style="z-index:3000" />
2.在引入
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
components: {
ElImageViewer
},
methods:{
handleClick(row){
if(row.date==1)
{
this.previewList=[require('../../../assets/image/zj_1.png')]
document.body.style.overflow = 'hidden';
this.showImagePreview= true
};
},
closePreview(){
this.showImagePreview= false;
document.body.style.overflow = 'auto';
},
},
data() {
return {
showImagePreview: false,
previewList:[],
}
},
};
</script>
3.实现效果如下: