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

最新推荐文章于 2024-07-15 16:12:57 发布

schumyxp

最新推荐文章于 2024-07-15 16:12:57 发布

阅读量2.4k

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/schumyxp/article/details/131007566

在el-table设置了固定高度并启用滚动后，若表格内使用el-image组件且开启lazy加载，图片可能无法正常显示。原因是el-image未能找到正确的overflow容器。通过使用el-image的scroll-container属性，可以手动指定滚动容器，例如设置为#listTable.el-table__body-wrapper，确保图片懒加载能正常工作。对于有多个表格的情况，可以通过设置id来区分不同的滚动容器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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