Bootstrap

el-table里面的el-image的lazy属性问题

当我们在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就是我们要的那个,就说明你找对了。

;