需求:el-table中展示的图片,可以点击放大,并且使用懒加载(偶尔会有404的图片路径)
坑一: 一张404图片会导致全部图片无法放大,用@error解决
坑二: 但是马上发现如果用了vue-lazyload,则一定不会触发@error,改用原生img懒加载属性,如下图所示:
完整代码
<el-table-column
label="图片"
width="100">
<template v-slot="scoped">
<div class="imgDiv" >
<img v-show="!scoped.row.violation"
loading="lazy"
:src="scoped.row.url"
:large="scoped.row.url"
:preview="scoped.row.url" preview-text=""
@error="errorImg(scoped.row)"
>
</div>
</template>
</el-table-column>
errorImg(row){
//这里必须用$set
this.$set(row, "violation" ,true)
// 这里要延时处理
setTimeout(()=>{
this.$previewRefresh();
},1000)
}
另外还有一个坑(三):
el-image 组件中虽然同时有懒加载和放大的功能,并且不会出现第一个坑,但是如果在 el-table 中使用,则在首屏未显示的图片将永远不会加载,不知道该如何解决