vue2+elementui的el-table固定列会遮住横向滚动条以及错位

解决方案

我是最右侧固定列,所以下面的class名称是.el-table__fixed-right, 如果有左侧固定请自行替换为el-table__fixed

防止固定列表格高度错位

javascript 复制代码
  .el-table__fixed-body-wrapper {
    .el-table__body {
      padding-bottom: 15px; // 这个得自己调试看多少合适
    }
  }
}

如果还没有解决错位, 请看你的el-table__body-wrapper是不是自己写了max-height的样式属性, 这会影响固定列定位的

解决固定列错位后, 接下来就是吧固定列往上提滚动条的高度就不会影响了

javascript 复制代码
  .el-table__fixed-right {
    height: auto !important;
    bottom: 8px !important;// 这个得自己调试看多少合适
  }
   //去掉固定列下方的横线, 样式优化
  .el-table__fixed::before, .el-table__fixed-right::before {
    display: none;
  }

解决效果如图:

留出了高度并且高度一致没有错位

问题完美解决!!!

相关推荐
JarvanMo几秒前
Flutter:使用图像作为屏幕背景
前端
Mintopia2 分钟前
💰 金融Web应用中的AIGC风险控制技术与合规适配
前端·javascript·aigc
Mintopia6 分钟前
🚀 Next.js 压力测试与性能调优实战
前端·javascript·全栈
江城开朗的豌豆6 分钟前
TypeScript 类型系统漫游指南:从入门到爱上类型安全
前端·javascript
江城开朗的豌豆11 分钟前
从 JavaScript 到 TypeScript:我为什么选择了类型守护
前端·javascript
杨超越luckly27 分钟前
HTML应用指南:利用POST请求获取全国爱回收门店位置信息
大数据·前端·python·信息可视化·html
源码站~42 分钟前
基于SpringBoot+Vue的健身房管理系统
vue.js·spring boot·后端·毕业设计·前后端分离·管理系统·健身房
鹏多多1 小时前
解锁flutter弹窗新姿势:dialog-flutter_smart_dialog插件解读+案例
前端·flutter·客户端
IT_陈寒1 小时前
Redis 7.0的这个新特性让我处理百万级QPS轻松了50%,你可能还不知道!
前端·人工智能·后端
2301_796512521 小时前
Rust编程学习 - 如何快速构建一个单线程 web server
前端·学习·rust