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

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值