场景一：表格中有时候会有点击文字查看图片的功能（因为表格的一个单元格不方便显示多个图片）如下图所示：

 对于这个需求，我们可以应对的方案是：在文字旁边写一个el-image图默认显示多张图片中的第一张，el-image的盒子根据文字的盒子定位position：absolute; left:0， 且el-image的宽高和文字的div宽高保持一致，相当于图片完全覆盖在文字上面，但el-image设置了透明度opacity:0，隐藏了图片。这样视觉效果上点击了文字，实际上点击了图片。

preview-src-list对应的是图片列表，即多张图片访问链接的数组

// 这是table中对【户型图】单元格的html
<template #status="{ record }"><div :class="record.imgName? 'type-sty':''">{{ record.imgName? record.imgName : '-'}}<el-imagev-if="record.imgName"class="nowImage":src="baseURL + '/images/' + record.imgArr[0]":preview-src-list="record.imgList"/></div></template>// 这是css样式
.type-sty{position: relative;  cursor: pointer;border-radius: 4px;box-shadow: inset 0px -1px 5px rgb(171, 198, 216);
}
.type-sty:hover{box-shadow: inset 0px -1px 5px rgb(104, 130, 148);color: rgb(104, 130, 148);
}
.nowImage{position: absolute;  // 让图片根据文字进行定位width: 100%;left: 0;   // 图片完全覆盖文字的divopacity: 0;  // 让图片的透明度为0
}