el-table里面的el-image的lazy属性问题_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就是我们要的那个，就说明你找对了。