当我们在el-table里面某一列显示图片的时候,可以用el-image。
当我们给table设置了height之后,表头就固定了。表里面的内容如果超过了height的值,就可以滚动显示出来。
但是这个时候,如果里面用到了el-image,会发现如果设置了lazy,也就是懒加载,图片是不会显示的。
查了很多现成的文档,也问了ChatGPT,都没有好的答复。不过还是找到了一些蛛丝马迹。
el-image会找到最近的一个overflow为auto或者scroll的父元素。如果它没找到,那肯定就加载不了了。
没有深究,暂时不知道为什么el-image没有正确的找到table里面那个滚动的父元素。那就只能手动设置一下了。
正好el-image有个属性是scroll-container,就是专门干这个用的,可以传string或者HTMLElement进去。如果传string,那这个string最终会传给document.querySelector去寻找对应的HTMLElement。
比如我这边,table是这样设置的:
<el-table id="listTable" stripe height="450"
那对应的el-image就可以这么写:
<el-image :src="scope.row.orgImg" lazy fit="fit" scroll-container="#listTable .el-table__body-wrapper"></el-image>
因为我的页面里面有多个table,为了方便查找,我就设置了一个id。
如果你不确定你的scroll-container的值应该写什么,就可以把里面的内容拿出来,用document.querySelector试一下,比如我的,就要试一下document.querySelector('#listTable .el-table__body-wrapper'),如果看到找到的div就是我们要的那个,就说明你找对了。