場景一：表格中有時候會有點擊文字查看圖片的功能（因為表格的一個單元格不方便顯示多個圖片）如下圖所示：

?對于這個需求，我們可以應對的方案是：在文字旁邊寫一個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
}

?