记录el-table操作fixed后高度不一致问题(已解决)

目录

背景

解决代码

PS:


背景

引用el-table,然后将右侧的操作按钮列,fixed在右侧

结果效果图里面右侧操作列高度和其他列高度不一致……

看图

 

 

重启操作按钮下有个空隙,我查看了按钮的大小

 

但是别的按钮大小都是 180X59,所以是下面那个按钮的高度不一致的问题,然后查看这一列的class

明显和别的不一样,所以修改高度为100%就行。

解决代码

// 表格高度不一致,将高度撑开
::v-deep .el-table__fixed-right {
  height: 100% !important;
}

检查Elements里面是否有这个class,有的话直接复制过去就行!

这样就解决啦,看效果图!!!

 

 

 

 

 没有明显的空隙啦(那两条白线是表格的边框)

PS:

看有的帖子说会出现高度不一致是因为没有滑动条,所以我也加了滑动条,但是并没有改变这种情况,或许有些情况可以试试。

### 解决方案 对于 `el-table` 中固定在滚动时出现错位的问题,通常是因为浏览器渲染机制以及 CSS 属性处理当所引起。为了有效解决这一问题,可以采取以下几种方法: #### 方法一:调整样式属性 通过修改表格容器及其子元素的样式来优化显示效果。具体来说,在 `.el-table__body-wrapper` 和 `.el-table__fixed-body-wrapper` 类上应用特定的 CSS 样式[^3]。 ```css .el-table__body-wrapper { overflow-x: hidden; } .el-table__fixed-body-wrapper { position: absolute !important; /* 确保固定位置绝对 */ } ``` #### 方法二:监听窗口大小变化事件 由于页面布局可能会因为视窗尺寸改变而受到影响,因此可以通过 JavaScript 来动态调整表格的高度和宽度,从而保持固定的与其他部分同步更新。 ```javascript window.addEventListener('resize', function() { const tableBodyWrapper = document.querySelector('.el-table__body-wrapper'); const fixedColumnWidths = Array.from(document.querySelectorAll('.el-table__fixed-column--label')).map(item => item.offsetWidth); let totalFixedWidth = 0; for (let width of fixedColumnWidths) { totalFixedWidth += width; } if(tableBodyWrapper){ tableBodyWrapper.style.paddingLeft = `${totalFixedWidth}px`; } }); ``` #### 方法三:使用第三方库辅助开发 如果上述两种方式仍无法满足需求,则考虑借助一些成熟的解决方案,比如利用专门针对此场景设计的插件或工具包。例如,有开发者已经实现了基于 Element UI 的增强功能,能够更好地兼容各种复杂情况下的表格操作[^5]。 以上三种策略可以根据实际情况单独或者组合运用,以达到最佳修复效果。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值