element-ui表格问题

表格图片显示问题

问题:

表格中是用户信息,有用户头像,用户头像图片没显示,当两个用户头像地址一样,前一页还显示,下一页就没有了

环境:

elementUI2.10.1组件el-table el-avatar

vue2.6.10

解决:

原因1:el-avatar组件内有一个isImageExist,默认情况下图片请求失败会把它设置为false,一旦设置为false,就不会再变成true,此时修改图片为正确地址也不会渲染图片。

原因2:el-table表格更新,默认是会只更新变化部分,尽量减少dom操作。

因此一旦有图片请求失败,就很有可能导致原来有头像的用户显示不出来,解决办法是给el-table增加属性row-key=“id”,这样表格就会更新所有行的dom。

表格中多出一条线

问题:

表格中设置了最后一列固定右侧,当缩放浏览器让表格产生横向滚动条,然后缩放到表格没有横向滚动条,此时多出一条线

环境:

elementUI2.10.1组件el-table

vue2.6.10

解决:

el-table中.el-table__fixed元素产生的线,当表格出现横向滚动条时,.el-table__fixed元素的高度会减去滚动条的宽度gutterWidth,但是缩放到不显示滚动条时.el-table__fixed元素高度并不会再加上gutterWidth,这样导致表格多出一条线。

所以问题就是要覆盖掉元素错误的高度样式,为了避免影响过多,可以在选择器上面加一些其他限制,下面的不做限制。

.el-table__fixed-right{
    height: 100% !important;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值